JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="green">
        <div class="yellow">Желтый</div>
        <div class="blue">Синий</div>
        <div class="red">Красный</div>
    </div>
</div>

CSS

.wrapper{
    border: 2px solid #000;
    background: #777;
    color: #2d2d2d
}
.green{
    overflow:hidden;
    border: 3px solid green;
    width: 80%;
    margin: 0 auto
}

.yellow{
    float: left;
    border: 3px solid yellow;
    margin-right: 20px;
    padding: 5px 20px
}
.blue{
    float: left;
    border: 3px solid blue;
    padding: 5px 20px
}
.red{
    float: right;
    border: 3px solid red;
    padding: 5px 20px
}