JSFiddle - React, Tailwind, and code Playground

by Dwarakesh pallagolla

HTML

<div id='parent2' class="parent">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
<div id='parent5' class="parent">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

SCSS

.left {
    padding: 1em;
    background-color: #337ab7;
    text-align: left;
}

.right {
    padding: 1em;
    background-color: #5cb85c;
    text-align: right;    
}

.parent {
    display: flex;
    overflow: hidden;
    margin: 1em 0;
    color: #fff;
    border: 1px solid #333;
    align-items: center;
}

#parent2 {
    .left {
        flex-grow: 1;
    }
}

#parent5 {
    > div {
        flex: 1;
    }
}