JSFiddle - React, Tailwind, and code Playground

by FlasJunior

HTML

<h2>Test1</h2>
<table style="width:100%">
    <tr>
        <td class="col"><div>aaa</div></td>
        <td class="col"><div>bbb</div></td>
        <td class="col"><div>ccc<br />ccc2</div></td>
    </tr>
</table>


<h2>Test2</h2>
<div id="test2">
    <div class="col"><div>aaa</div></div>
    <div class="col"><div>bbb</div></div>
    <div class="col"><div>ccc<br />ccc2</div></div>
</div>


<h2>Test3</h2>
<p class="info">würde in Firefox und Chrome gehen, aber nicht in IE</p>
<div id="test3">
    <div class="col"><div>aaa</div></div>
    <div class="col"><div>bbb</div></div>
    <div class="col"><div>ccc<br />ccc2</div></div>
</div>

CSS

body{font-size:14px;}
h2{font-size:15px; padding:20px 0 0 0;}

.col{background:red;position:relative;}
.col > div{background:green;width:100%;height:100%;}



#test2{display:table;}
#test2 .col{display:table-cell; padding-left:5px; padding-right:5px;}

#test3{display:table;height:100%;}
#test3 .col{display:table-cell; padding-left:5px; padding-right:5px;}