JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid wrapper">
  <div class="row">
    <div class="col content-wrapper">
      <div class="content">1</div>
    </div>
    <div class="col content-wrapper thumbnail">
      <div class="content">2</div>
    </div>
  </div>
</div>

SCSS

html, body {
  height: 100%;
}

.wrapper {
  &,
  & > .row,
  & > .row > .col {
    height: 100%;
  }
}

.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  
  &.thumbnail {
    background: #afafaf;
  }
}

.content {
  font-size: 40px;
}