JSFiddle - React, Tailwind, and code Playground

by Egor Makarenko

HTML

<html>
    <head></head>
    <body>
        
        
        
        <div id="leftcolumn"></div>
        <div id="rightcolumn"></div>
        <div id="centercolumn">
            Этот синий блок должен быть высотой в несколько строк текста, разве не так?
            <div style="clear:both;"></div>
        </div>
        <div style="clear:both;"></div>
        
        
        
        
        <br><br> А вот так должно быть: <br><br><br>
        
        
        
        
        <div id="leftcolumn"></div>
        <div id="rightcolumn"></div>
        <div id="centercolumn">
            Этот синий блок высотой в несколько строк текста.
        </div>
        <div style="clear:both;"></div>
        
        
        
        
        <br><br> Ещё можно использовать таблицу: <br><br><br>
        
        <div id="leftcolumn"></div>
        <div id="rightcolumn"></div>
        <div id="centercolumn">
            <table>
                <tr>
                    <td>
                        Этот синий блок высотой в несколько строк текста несмотря на то, что в нём есть блок с clear:both;
                        <div style="clear:both;"></div>
                    </td>
                </tr>
            </table>
        </div>
        <div style="clear:both;"></div>
    </body>
</html>

CSS

body {font-family:Arial, sans-serif;font-weight:bold;font-size:14px;}
#leftcolumn {width:100px;float:left;height:400px;background:red;}
#rightcolumn {width:100px;float:right;height:400px;background:red;}
#centercolumn {margin:0px 100px;background:blue;color:#FFF;}