JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div>
<div class="col col4">Lorem ipsum dolor</div>
</div>

CSS

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%
}

.col { 
  min-height: 200px;
  padding: 30px;
  
  word-break: break-word
}

.col1 {
  -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: orange;
    font-size: 80px
}

.col2 {
  -webkit-box-flex: 3;
    -moz-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    background: yellow
}

.col3 {
  -webkit-box-flex: 4;
    -moz-box-flex: 4
    -webkit-flex: 4;
    -ms-flex: 4;
    flex: 4;
    background: skyblue
}

.col4 {
  -webkit-box-flex: 4;
    -moz-box-flex: 4;
    -webkit-flex: 4;
    -ms-flex: 4;
    flex: 4;
    background: red
}