JSFiddle - React, Tailwind, and code Playground

HTML

Через Float<br/>
<div class="wrap">
    <div class="left">Ячейка1</div> 
    <div class="center">Ячейка1</div> 
    <div class="right">Ячейка1</div> 
</div>
<br/>    
Через Inline-block<br/>
<div class="wrap">
    <div class="left2">Ячейка1</div>
    <div class="center2">Ячейка1</div>
    <div class="right2">Ячейка1</div> 
</div>
<br/>
Через Table<br/>
<div class="wrap2">
    <div class="left3">Ячейка1</div>
    <div class="center3">Ячейка1</div>
    <div class="right3">Ячейка1</div> 
</div>

CSS

.wrap{
    width: 100%;
    overflow: hidden;
    clear: both;
}

.left {
    float: left;
    border: 1px solid red;
    text-align: left;
    width: 32%;
}
.center {
    float: left;
    border: 1px solid green;
    text-align: center;
    width: 32%;
}
.right {
    float: left;
    border: 1px solid black;
    text-align: right;
    width: 32%;
}

.left2 {
    display: inline-block;
    zoom: 1;
    *display: inline;
    border: 1px solid red;
    text-align: left;
    width: 32%;
}
.center2 {
    display: inline-block;
    zoom: 1;
    *display: inline;
    border: 1px solid green;
    text-align: center;
    width: 32%;
}
.right2 {
    display: inline-block;
    zoom: 1;
    *display: inline;
    border: 1px solid black;
    text-align: right;
    width: 32%;
}

.wrap2 {
    display: table;
    width: 100%;
}
.left3 {
    display: table-cell;
    border: 1px solid red;
    text-align: left;
}
.center3 {
    display: table-cell;
    border: 1px solid green;
    text-align: center;
}
.right3 {
    display: table-cell;
    border: 1px solid black;
    text-align: right;
}