Tabbed content with equal height - html

Question

I'm trying to achieve a tabbed menu that displays content which is displayed in a block. I can achieve this using just padding but I want each block to be the same height, I tried using flexbox but couldn't seem to get it to work. How can I achieve that?
.tab-pane {
flex: 1;
padding: 80px;
}
.nav-tabs {
border-bottom: none;
display:block;
}
.nav-tabs li a {
text-decoration:none;
}
.jj-icon {
max-width: 50px;
padding-bottom: 20px;
}
.bg-blue {
background-color: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-200">
<div class="row">
<div class="col-6">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Title 1</a></li>
<li><a data-toggle="tab" href="#menu1">Title 2 </a></li>
<li><a data-toggle="tab" href="#menu2">Title 3</a></li>
</ul>
</div>
<div class="col-6">
<div class="tab-content d-flex flex-column">
<div id="home" class="tab-pane justify-content-center bg-blue active">
<img src="images/marketing.svg" class="jj-icon">
<h3>Menu</h3>
<p>Sed vel erat ultrices, facilisis metus et, tincidunt turpis. Aenean nec lorem finibus, ornare ex sit amet, tempus nunc. Proin feugiat rhoncus nibh vel laoreet.</p>
</div>
<div id="menu1" class="tab-pane justify-content-center bg-blue fade">
<img src="images/marketing.svg" class="jj-icon">
<h3>Menu 1</h3>
<p>Faucibus, vitae posuere felis molestie. Integer vulputate euismod libero, ac dignissim arcu aliquam id. In hac habitasse platea dictumst.</p>
</div>
<div id="menu2" class="tab-pane justify-content-center bg-blue fade">
<img src="images/marketing.svg" class="jj-icon">
<h3>Menu 2</h3>
<p>Fusce sagittis urna nec ultrices rutrum. In tristique mi non tellus vulputate, nec luctus diam porttitor. Nulla porttitor sagittis placerat.</p>
</div>
</div>
</div>
</div>
</div>
Here's how I want it to look:

Answer 1

Is this the basic design pattern you are looking for?
#topBar,#bottomBar{
height:10vh;
width:100vw;
background-color:black;
}
#middleContainer{
display:flex;
justify-contents:center;
width:100vw;
height:80vh;
background-color:white;
}
body{
margin:0;
}
#left,#right{
display:flex;
flex-direction:column;
align-items:center;
width:50%;}
p{
border:solid 2px green;
}
#right,#left{
border:solid 2px red;
}
#big{
width:90%;
height:90%;
}
<div id='topBar'>
</div>
<div id='middleContainer'>
<div id='left'>
<p>title 1</p>
<p>title 2</p>
<p>title 3</p>
</div>
<div id='left'>
<p id='big'>some text</p>
</div>
</div>
<div id='bottomBar'>
</div>

Answer 2

Bootstrap comes with buil-in class for display , margin, padding , ...
flex box can be imbricated: possible example :
.tab-pane {
flex: 1;
padding: 80px;
}
.nav-tabs {
border-bottom: none;
display:block;
}
.nav-tabs li a {
text-decoration:none;
}
.jj-icon {
max-width: 50px;
padding-bottom: 20px;
}
.bg-blue {
background-color: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-200">
<div class="row">
<div class="col-6 d-flex">
<ul class="nav nav-tabs d-flex flex-column w-100 m-0 p-0 align-items-center justify-content-center">
<li class="active p-0 m-2"><a data-toggle="tab" href="#home">Title 1</a></li>
<li class=" p-0 m-2"><a data-toggle="tab" href="#menu1">Title 2 </a></li>
<li class=" p-0 m-2"><a data-toggle="tab" href="#menu2">Title 3</a></li>
</ul>
</div>
<div class="col-6">
<div class="tab-content d-flex flex-column">
<div id="home" class="tab-pane justify-content-center bg-blue active">
<img src="images/marketing.svg" class="jj-icon">
<h3>Menu</h3>
<p>Sed vel erat ultrices, facilisis metus et, tincidunt turpis. Aenean nec lorem finibus, ornare ex sit amet, tempus nunc. Proin feugiat rhoncus nibh vel laoreet.</p>
</div>
<div id="menu1" class="tab-pane justify-content-center bg-blue fade">
<img src="images/marketing.svg" class="jj-icon">
<h3>Menu 1</h3>
<p>Faucibus, vitae posuere felis molestie. Integer vulputate euismod libero, ac dignissim arcu aliquam id. In hac habitasse platea dictumst.</p>
</div>
<div id="menu2" class="tab-pane justify-content-center bg-blue fade">
<img src="images/marketing.svg" class="jj-icon">
<h3>Menu 2</h3>
<p>Fusce sagittis urna nec ultrices rutrum. In tristique mi non tellus vulputate, nec luctus diam porttitor. Nulla porttitor sagittis placerat.</p>
</div>
</div>
</div>
</div>
</div>