HTML rows displaying side-by-side rather than vertically within column - html

Question

Should this div not display my two rows one on top of the other? or am I missing something?
the rows called 'tabs' and 'main' are displaying side-to-tide within the column('main' on the left), rather than tabs on top main below
Content div:
<div class='row content'>
<div class='col-12' style='display:flex; flex-direction:column; justify-content: center;'>
<div class='row tabs' style='align-items: flex-start; width:100%; '>
<ul class="nav nav-tabs" style='display:flex; flex-direction:row; position:absolute; right:0;'>
<li class="nav-item">
<a class="nav-link active" href="#">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Replies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">More</a>
</li>
</ul>
</div>
<div class='row main' style='min-height:100px; width:100%;'>{{user.username}} 's profile </div>
</div>
</div>
CSS:
.content{
width: 103.5%;
min-height:50%;
display:flex;
flex-direction: column;
justify-content: center;
align-items:center;
background-color: #F3D5AE;
}
.tabs{
position: relative;
top:0%;
}

Answer 1

If I'm understanding correctly you really just want something like shown below. I'd suggest getting more familiar with the different utility classes bootstrap provides to avoid repetitive (and in many cases unnecessary) styles since your usage of flex and position etc isn't correct and could make your output cleaner in the process. Cheers
.example {
background-color: #F3D5AE;
}
.example2 {
padding: 1rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row example'>
<div class='col-12'>
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Replies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">More</a>
</li>
</ul>
<div class="col-12 example2">
{{user.username}}'s profile
</div>
</div>
</div>