JSFiddle - React, Tailwind, and code Playground

HTML

<div>Page elements above</div>
<div id="wrapper">
  <ul id="left">
      <li>Button 11</li>
      <li>Button 12</li>
      <li>Button 13</li>
      <li>Button 14</li>
      <li>Button 15</li>
      <li>Button 16</li>
  </ul>
  <ul id="center">
      <li>Button 21</li>
      <li>Button 22</li>
  </ul>
  <ul id="right">
      <li>Button 31</li>
      <li>Button 32</li>
      <li>Button 33</li>
      <li>Button 34</li>
      <li>Button 35</li>
      <li>Button 36</li>
  </ul>
  <div class="clearfix"></div>
</div>
<div>Page elements below</div>

CSS

#wrapper {
    border: 2px #999 dashed;
}

#left {
    float: left;
    width: 40%;
    background: #daa;
}

#center {
    float: left;
    width: 20%;
    background: #ddd;
}

#right {
    float: left;
    width: 40%;
    background: #ada;
}

#wrapper ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#wrapper ul li  {
    margin: 2px;
    padding: 2px;
    border: 1px black solid;
    width: 40px;
    display: inline-block;
    /* hacks for IE 7 */
    zoom: 1;
    *display: inline;
}

#right li {
    float: right;
}

.clearfix {
    clear: both;
}