Struggling with arranging a flexbox 'table' in HTML to create an interesting layout at the top. Unfortunately, I can't seem to nail it down properly.
The current output: https://i.sstatic.net/Gr5cf.png
The desired result: https://i.sstatic.net/RJxyn.png
I attempted to achieve this without using inner divs and spans, opting for margin:auto. However, it ended up messing with the borders, pushing them towards the center instead of the edges. Below is the code snippet for the current output:
.flex-container {
width: auto;
height: 100vh;
display: flex;
flex-direction: column;
}
.flex-container .middle {
flex: 1;
display: flex;
}
.top {
padding-top: 30px;
border: 2px solid #05788D;
display:flex;
}
.leftSide {
padding-top: 30px;
display: flex;
flex-wrap: wrap;
flex-basis: 50%;
overflow: auto;
border: 2px solid #05788D;
}
.rightSide {
padding-top: 30px;
display: flex;
flex-wrap: wrap;
flex-basis: 50%;
overflow: auto;
border: 2px solid #05788D;
border-left-style: none;
}
.firstOption
{
border: 2px solid #05788D;
border-top-style: none;
border-bottom-style:none;
}
.anotherOption
{
border: 2px solid #05788D;
border-top-style: none;
border-bottom-style:none;
border-left-style:none;
}<div class="flex-container">
<div class="top">
<div style="width:50%;">
<span class="firstOption">One option</span>
</div>
<div style="width:50%;">
<span class="anotherOption">Another option</span>
</div>
</div>
<div class="middle">
<div class="leftSide">
left
</div>
<div class="rightSide">
right
</div>
</div>
</div>