I am working on a CSS file where I need to use flex to position the elements.

The elements should look like this:

======================================|--------|
            Header                    |        |    
======================================| edge-1 | 
     |                                |--------|
     |                                |        | 
Nav  |         Information            | edge-2 | 
     |                                |--------|
     |                                |        | 
     |                                | edge-3 |
======================================|        |
        Footer                        |        | 
=======================================--------|        

Details about the element size are:

• The left side container (Header, Nav, Information, Footer) needs 4/5 of the parent's width.
• The right side container (edges 1,2,3) needs 1/5 of the parent's width.

• The Nav needs 1/4 of the parent's width. 
• The Information needs 3/4 of the parent's width.
• The Header needs 1/5 of the parent's height.
• The Footer needs 1/5 of the parent's height.

I have below index.html file which is read only file:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.holder {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.elements {
  display: flex;
  flex: 1;
}

.left-portion {
  display: flex;
  flex-direction: column;
  flex: 4;
}

.right-portion {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.header {
  flex: 1;
  background-color: #f1f1f1;
}

.footer {
  flex: 1;
  background-color: #f1f1f1;
}

.content {
  display: flex;
  flex: 3;
}

.nav {
  flex: 1;
  background-color: #e1e1e1;
}

.information {
  flex: 3;
  background-color: #d1d1d1;
}

.item {
  border: 1px solid #ccc;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edge-1,
.edge-2,
.edge-3 {
  flex: 1;
  background-color: #c1c1c1;
}

<div>
  <div class="Holder">
    <div class="elements">
      <div class="left-portion">
        <div class="item header" data-title="header"></div>
        <div class="content">
          <div class="item nav" data-title="nav"></div>
          <div class="item information" data-title="information"></div>
        </div>
        <div class="item footer" data-title="footer"></div>
      </div>

      <div class="right-portion">
        <div class="item edge-1" data-title="edge-1"></div>
        <div class="item edge-2" data-title="edge-2"></div>
        <div class="item edge-3" data-title="edge-3"></div>
      </div>
    </div>
    <div class="template">
      <div class="item item-1" data-title="header"></div>
      <div class="item item-2" data-title="nav"></div>
      <div class="item item-3" data-title="information"></div>
      <div class="item item-4" data-title="footer"></div>
      <div class="item item-5" data-title="edge-1"></div>
      <div class="item item-6" data-title="edge-2"></div>
      <div class="item item-7" data-title="edge-3"></div>
    </div>
  </div>
</div>

With this css I am able to align elements which are under div portion “Holder -> elements”

Now I was told to modify this css based on test case script:

  it.each([
    'header', 'nav', 'information', 'footer', 'edge-1', 'edge-2', 'edge-3'
  ])('verify element %s ', async (element) => {
    const elements = await driver.findElement(By.css(`.elements [data-title="${element}"]`))
    const template = await driver.findElement(By.css(`.template [data-title="${element}"]`))

    const eRect = await elements.getRect()
    const tRect = await template.getRect()

    const deviation = 2
    expect(Math.abs(tRect.y - eRect.y)).toBeLessThanOrEqual(deviation)
    expect(Math.abs(tRect.x - eRect.x)).toBeLessThanOrEqual(deviation)

    expect(Math.abs(tRect.width - eRect.width)).toBeLessThanOrEqual(deviation)
    expect(Math.abs(tRect.height - eRect.height)).toBeLessThanOrEqual(deviation)
  })

Here the test script needs the items which are under Div class “template” to be inside the flex container holder.

I am stuck here on how to modify the css without touching HTML and test scripts.