JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left" ><input type="button" value="left" /></div>
<div class="center" ><input type="text" name="search_text" required="required" placeholder="Найти книгу по названию"></div>
<div class="right" ><input type="button" value="right" /></div>

<!-- If I uncomment the center div, the right one appears in another block, below the others-->

CSS

.left {
    float:left;
    border: 1px solid blue;
    width: 120px;
}
.right {
    float:right;
    border: 1px solid red;
    width: 100px;
    text-align: right;
}
.center{
  display: block;
    float: left;
    border: 1px solid green;
    width: calc(100% - 226px);
    text-align: center;
}