JSFiddle - React, Tailwind, and code Playground

HTML

<div class="three_column three_column_wrap">
            <div class="left_column">
                <div>
                    left
                </div>
            </div>
            <div class="center_column">
                <div>

                    <!-- add elemebnts -->
                    <article class="two_column">
                        <div class="left_column">
                            123
                        </div>
                        <div class="right_column">
                            <p>11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 </p>
                        </div>
                    </article>
                    <!-- /add elemebnts -->

                </div>
            </div>
            <div class="right_column">
                <div>
                    right
                </div>
            </div>
        </div>

        <br><br>

        <!-- add elemebnts -->
        <article class="two_column">
            <div class="left_column">
                123
            </div>
            <div class="right_column">
                <p>11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 11111111 </p>
            </div>
       ...

CSS

/* три колонки - универсальный класс */
        .three_column {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
            flex-wrap: nowrap;
            outline:2px solid black;
        }
        .three_column > .left_column {
            background-color: #7F9DB9;
            flex-basis: 300px;
            flex-shrink: 0;
            flex-grow: 0;
        }
        .three_column > .center_column {
            flex-grow: 1;
            flex-shrink: 1;
        }
        .three_column > .right_column {
            background-color: #F5B494;
            flex-basis: 300px;
            flex-shrink: 0;
            flex-grow: 0;
        }


        /* две колонки - универсальный класс */
        .two_column {
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
            flex-wrap: nowrap;
        }
        .two_column > .left_column {
            outline: 1px solid red;
            flex-basis: auto;
            flex-shrink: 0;
            flex-grow: 0;
            padding: 20px;
        }
        .two_column > .right_column {
            outline: 1px solid green;
            flex-basis: 100%;
            flex-shrink: 1;
            flex-grow: 1;
            padding: 20px;
        }