JSFiddle - React, Tailwind, and code Playground

by BraveOstrich

HTML

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

CSS

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
    width: 100px;
    background-color: blue;
}
.flex-2 {
    position: relative;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: red;
}
.flex-2-child {
    /*height: 100%;*/
    align-items: stretch;
    width: 100%;
    background-color: green;
}