JSFiddle - React, Tailwind, and code Playground

by Dmitry Maximov

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>
<div class="container">

  <header>Шапка</header>

  <main>

    <div class="content">
      <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
    </div>

    <aside>
      <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
    </aside>

  </main>

  <div class="info">Информация</div>

  <footer>Футер</footer>  

</div>

CSS

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  padding: 30px;
  background: orange;
}

main {
  display: flex;
}

.content {
  width: 70%;
  padding: 30px;
  background: lightsteelblue;
}

aside {
  width: 30%;
  padding: 30px;
  background: darkseagreen;
}

.info {
  padding: 30px;
  background: brown;
}

footer {
  padding: 30px;
  background: palevioletred;
}

JavaScript

$(document).ready(function() {

  $('aside').matchHeight({
    target: $('.content')
  });

});