JSFiddle - React, Tailwind, and code Playground
HTML
<div class='main'>
<div class='a'>
45435465
</div>
<div class='b'>
sfsfht
</div>
</div>
<div class="flex_test">
<ul>
<li style="background: red">1</li>
<li style="background: green">2</li>
<li style="background: yellow">3</li>
</ul>
<ul>
<li style="background: yellowgreen">4</li>
<li style="background: greenyellow">5</li>
<li style="background: pink">6</li>
</ul>
<ul>
<li style="background: blueviolet">7</li>
<li style="background: aliceblue">8</li>
<li style="background: orangered">9</li>
</ul>
</div>
<br>
<br>
<div class="float_test">
<ul>
<li style="background: red">1</li>
<li style="background: green">2</li>
<li style="background: yellow">3</li>
<li style="background: yellowgreen">4</li>
<li style="background: greenyellow">5</li>
<li style="background: pink">6</li>
<li style="background: blueviolet">7</li>
<li style="background: aliceblue">8</li>
<li style="background: orangered">9</li>
</ul>
</div>
CSS
*{
margin: 0;
padding: 0;
}
.main{
display:flex;
flex-direction:row;
}
.a{
flex:1
}
.b{
width:20px;
}
li{
height: 70px;
line-height: 70px;
color: #000;
background: #fff;text-align: center;
list-style: none;
}
.flex_test ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex_test li {
border-bottom: 1px solid #b5b5b5;
border-left: 1px solid #b5b5b5;
-webkit-box-flex: 1;
-webkit-flex: 1 33.333333333333336%;
-ms-flex: 1 33.333333333333336%;
flex: 1 33.333333333333336%;
}
.float_test li{
float: left;
width: 33.333333333333336%;
}