JSFiddle - React, Tailwind, and code Playground

by masaab algailani

HTML

<div style="display:flex; flex-direction:row">
    <div style="flex-direction:column">
        <div class="listBoxHeader" style="flex-direction:row">
            Member Players
        </div>
        <div class="listViewAssignedCompanies" style="flex-direction:row"></div>
    </div>
    <div style="flex-direction:column">
        <div id="flexButtons">
            <button id='btnAssignSelected' class="k-button"><span class="k-icon k-i-arrow-w"></span></button>
            <button id='btnUnassignSelected' class="k-button"><span class="k-icon k-i-arrow-e"></span></button>
            <button id='btnAssignAll' class="k-button"><span class="k-icon k-i-seek-w"></span></button>
            <button id='btnUnassignAll' class="k-button"><span class="k-icon k-i-seek-e"></span></button> 
        </div>

    </div>
    <div  style="flex-direction:column">
        <div class="listBoxHeader" style="flex-direction:row">
            Non-Member Players
        </div>
        <div class="listviewunassignedcompanies" style="flex-direction:row"></div>
    </div>
</div>

CSS

#flexButtons{
      /* basic styling */
      width: 20px;
      height: 400px;
      border: 1px solid #555;
      font: 14px Arial;

      /* flexbox setup */
      display: -webkit-flex;
      -webkit-flex-direction: row;

      display: flex;
      flex-direction: row;
    flex-flow: row wrap;
     justify-content:space-between;
   }
 #flexButtons > button {
             
  width:16px;
    height:16px;
               


    
            }