Содержимое с вкладками равной высоты

Question

Я пытаюсь получить меню с вкладками, которое отображает контент, который отображается в блоке. Я могу добиться этого, используя только отступы, но я хочу, чтобы каждый блок был одинаковой высоты, я пытался использовать flexbox, но, похоже, не смог заставить его работать. Как мне этого добиться?

.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>

Вот как я хочу, чтобы это выглядело:

Answer 1

Bootstrap поставляется со встроенным классом для отображения, полей, отступов, ...

flex box может быть вставлен: возможный пример:

.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>

Answer 2

Это базовый c шаблон дизайна, который вы ищете?

#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>