JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Не сползает</h2>
<div class="left1"></div>
<div class="center1"></div>
<div class="right1"></div>

<p><br/></p><p><br/></p>

<h2>Сползает</h2>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}




.left1 {
    width: 20%;
    height: 25px;
    border: solid 1px red;
    float:left;
}


.center1 {
    width: 60%;
    height: 25px;
    border: solid 1px red;
    float:left;
}

.right1 {
    width: 20%;
    height: 25px;
    border: solid 1px red;
    float:left;
}












.left {
    width: 20%;
    min-width:150px;
    height: 25px;
    border: solid 1px red;
    float:left;
}


.center {
    width: 60%;
    height: 25px;
    border: solid 1px red;
    float:left;
}


.right {
    width: 20%;
    min-width:150px;
    height: 25px;
    border: solid 1px red;
    float:left;
}