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: flex;
}

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

.col1 {
    flex: 1;
    background: orange;
    font-size: 80px;
    min-width: 0;       /* NEW */
}

.col2 {
    flex: 3;
    background: yellow
}

.col3 {
    flex: 4;
    background: skyblue
}

.col4 {
    flex: 4;
    background: red
}