JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr style="border:1px solid blue;">
        <td class="table-td">
   <div class="tdcont">
      <div class="alwaystop">           
         <div class="at1">at1</div>
         <div class="at2">at2</div>
         <div class="at3">at3</div>
      </div>          
      <div class="below-at">
         <div class="bat1">bat1</div>
         <div class="bat2">bat2</div>
         <div class="bat3">bat3</div>
      </div>
   </div>            
   some content here
</td>
                <td class="table-td">
   <div class="tdcont">
      <div class="alwaystop">           
         <div class="at1">at1</div>
         <div class="at2">at2</div>
         <div class="at3">at3</div>
      </div>          
      <div class="below-at">
         <div class="bat1">bat1</div>
         <div class="bat2">bat2</div>
         <div class="bat3">bat3</div>
      </div>
   </div>
   lots of content here, <br />
   lots of content here<br />
   lots of content here <br />
</td>
                <td class="table-td">
   <div class="tdcont">
      <div class="alwaystop">           
         <div class="at1">at1</div>
         <div class="at2">at2</div>
         <div class="at3">at3</div>
      </div>          
      <div class="below-at">
         <div class="bat1">bat1</div>
         <div class="bat2">bat2</div>
         <div class="bat3">bat3</div>
      </div>
   </div>
</td>
</tr>
</table>

CSS

.alwaystop {
    display:table-row;
}

.below-at {
    display:table-row;
}
.at1, .at2, .at3{ 
   float:left; 
}

.bat1, .bat2, .bat3{ 
   float:left; 
}

div {
    border:#000000 1px solid;
}

.table-td{
   border:1px solid red;
}