Vertical tabs with flex box - css

Question

I would like to accomplish a vertical tabs layout, so on the left would be the tabs and on the right the tab contents. The challenge is that I have to adhere to a specific markup which makes things complicated.
Below is my last attempt, I cant make the tabs fill in the space left by the content:
ul{
list-style-type: none;
padding: 0;
margin: 0;
}
.tabs-container{
display: flex;
flex-direction: column;
max-width: 400px;
}
.tab{
width: 100px;
background-color: gray;
}
.tab-content{
display: none;
}
.tab-content.active{
display: block;
height: 100px;
order: -1;
align-self: flex-end;
}
<ul class='tabs-container'>
<li class='tab'>tab one</li>
<li class='tab-content active'>contents tab one</li>
<li class='tab'>tab two</li>
<li class='tab-content '>contents tab two</li>
<li class='tab'>tab three</li>
<li class='tab-content'>contents tab three</li>
</ul>
Is there a solution for this problem using css flex box?
Thanks

Answer 1

<div class="container">
<div class="obj"><div class="tab">Tab1</div><div class="tab-c">TabContent1</div></div>
<div class="obj"><div class="tab">Tab2</div><div class="tab-c">TabContent2</div></div>
</div>
<style>
.container {
display: flex;
flex-direction: column;
background-color: tomato;
}
.obj {
display: flex;
/*no need of specify the flex direction here it's row by default*/
background-color: orange;
margin: 10px;
}
.tab {
width: 50px;
background-color: yellow;
}
.tab-c {
width: 150px;
background-color: white;
}
</style>
This is probably not the most elegant way to do it but it's work for my needs