JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
    <div class="inner">11</div>
    <div class="inner">12</div>
    <div class="inner">13</div>
    <div class="inner">14</div>
</div>

<br><br>

<table class="outer" style='table-layout:fixed'>
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
 </tr>
</table>

<br><br>

<table class="outer" style='table-layout:fixed'>
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
 </tr>
</table>

CSS

.outer { width: 300px; border: 1px dotted red; }
.inner { 
    float: left; 
    border: 1px dotted blue; 
    max-width: 20px;    
}