JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="column-25">
        <h1>Заголовок 1</h1>
        <p>
        </p>
      </div>
    <div class="column-50">
        <h1>Заголовок 2</h1>
        <p>
        </p>
      </div>
    <div class="column-25">
                               <h1>Заголовок 3</h1>
              <p></p>
                       </div>
</div>

CSS

h1 {
      text-align: center;
      color: #FFF;
      margin: 0;
    }
    .wrapper{
      padding: 10px;
      width: 1000px;
      margin: 0 auto;
      overflow: hidden;
    }

    .column-25,.column-50 {
      background: #f1c40f;
      height: 320px;
      border: 10px #34495e solid;
      margin-right: -10px;
      box-sizing: border-box;
    }
    
        
    .column-25 {
      width: 25%;
      float: left;
    }
    
    .column-50 {
      width: 50%;
      float:  left;
    }
    
    .column-25:last-child {
      margin-right: 0px;
    }