Create a Two-Column Product Description with Tabs

[hellocc]

Hello,

I've created a 3 tab full-width description on my product page, using the HTML section in the Products-page of Shopify.

Now I would like to separate the text in each tab into 2 separate columns (in specific places).

If you look at the picture below, I would like to have Title 21 and 22 in the second tab and 31 and 32 in the 3rd tab. But with the code that I have, they all appear in the first tab.

Any suggestions? 

Thank you so much in advance!

 <ul class="tabs">
          <li>
            <a class="active" href="#tab1">
              TAB 1
            </a>
          </li>
          <li>
            <a href="#tab2" class="">
             TAB 2
            </a>
          </li>
          <li>
            <a href="#tab3" class="">
              TAB 3
            </a>
          </li>
        </ul>

        <!--Start tab content-->
        <ul class="tabs-content">
          <li class="active" id="tab1" style="display: block;">
            <div>
            
<div class="columns">
   <div class="column">
     <div class="row">
       <h3>TITLE 1 1</h3>
       <div>Text goes here</div>
     </div>
   </div>
  <div class="column">
     <div class="row">
       <h3>TITLE 1 2</h3>
       <div>Text goes here</div>
     </div>
   </div>

 
  <ul class="tabs-content">
          <li class="active" id="tab2" style="display: block;">
            <div>
            
<div class="columns">
   <div class="column">
     <div class="row">
       <h3>TITLE 2 1</h3>
       <div>Text goes here</div>
     </div>
   </div>
  <div class="column">
     <div class="row">
       <h3>TITLE 2 2</h3>
       <div>Text goes here</div>
     </div>
   </div>
            

  <ul class="tabs-content">
          <li class="active" id="tab3" style="display: block;">
            <div>
            
<div class="columns">
   <div class="column">
     <div class="row">
       <h3>TITLE 3 1</h3>
       <div>Text goes here</div>
     </div>
   </div>
  <div class="column">
     <div class="row">
       <h3>TITLE 3 2</h3>
       <div>Text goes here</div>
     </div>
   </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>