JSFiddle - React, Tailwind, and code Playground

HTML

<table data-mode="false" data-urlondeleteally="http://www.mlplanningidf.com/index.php?option=com_pulsar_ajax&amp;task=deleteItemsY" data-urlondeleteallx="http://www.mlplanningidf.com/index.php?option=com_pulsar_ajax&amp;task=deleteItemsX" data-urlondelete="http://www.mlplanningidf.com/index.php?option=com_pulsar_ajax&amp;task=deleteItem" data-urlondrop="http://www.mlplanningidf.com/index.php?option=com_pulsar_ajax&amp;task=updateItem" data-nameliste="planning_mois" class="category zebra table Pulsar-table2x ">
            <thead>
                <tr class="colonne" class="head_x"> 
  
  <th data-items="1498,1505,1543,1545,1547,1549,1551,1553" class="first"></th>
                    
                    <th data-val1x="2015-08-03 12:00:00" data-val0x="2015-08-03 09:00:00" class="second" style="">03</th>
                    <th data-val1x="2015-08-03 19:00:00" data-val0x="2015-08-03 13:00:00" class="first">03</th>
                    <th class="second" data-val0x="2015-08-04 09:00:00" data-val1x="2015-08-04 12:00:00">04</th>
                    <th class="first" data-val0x="2015-08-04 13:00:00" data-val1x="2015-08-04 19:00:00">04</th>
                    <th data-val1x="2015-08-05 12:00:00" data-val0x="2015-08-05 09:00:00" class="second">05</th>
                    <th data-val1x="2015-08-05 19:00:00" data-val0x="2015-08-05 13:00:00" class="first">05</th>
                    <th data-val1x="2015-08-06 12:00:00" data-val0x="2015-08-06 09:00:00" class="second">06</th>
                    <th data-val1x="2015-08-06 19:00:00" data-val0x="2015-08-06 13:00:00" class="first">06</th>
                    <th class="second" data-val0x="2015-08-07 09:00:00" data-val1x="2015-08-07 12:00:00">07</th>
                    <th class="first" data-val0x="2015-08-07 13:00:00" data-val1x="2015-08-07 19:00:00">07</th>
                    <th class="second" data-val0x="2015-08-10 09:00:00" data-val1x="2015-08-10 12:00:00">10</th>
                    <th class="first"...

CSS

.colonne{
    align-content: space-around;
    align-items: flex-end;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
 
}

.first{
align-self: flex-start; order: 0; background-color:green;display:block; width:25px;
}

.second{
   align-self: flex-end;order: 1;  background-color:pink;display:block;width:25px;
}