JSFiddle - React, Tailwind, and code Playground

by Nitish Koundade

HTML

<div class="band column">
  <div >one</div>
  <div  style="margin-left:130px">two</div>
  <div  style="margin-left:30px">three</div>
</div>
<div class="band row">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

CSS

.band {
      display: -webkit-flex;
    display: flex;
    background-color: white;
	  align-items: flex-start;
    border:1px solid black;
}
.band.row{-webkit-flex-direction: row; flex-direction: row;}
.band.column{-webkit-flex-direction: column; flex-direction: column;}
.band div{background-color: cornflowerblue;
    max-width: 100%;
    height: 100px;
    margin: 10px;}
.band div:nth-child(1){background-color: #009688;width:130px;}
.band div:nth-child(2){background-color: #0000FF;width;50px}
.band div:nth-child(3){background-color: #990000;width:200px}