JSFiddle - React, Tailwind, and code Playground

by Daniel

HTML

<div class="container">
  <div class="header">header</div>
  <div class="main">
    <label>
      <input class="content content_small"  type="radio" name="content" checked> Маленький контент
    </label>
    <label>
      <input class="content content_big" type="radio" name="content"> Большой контент
      <div class="resizer"></div>
    </label>
  </div>
  <div class="footer">footer</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  co
}

.header,
.main,
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header {
  height: 50px;
  flex-grow: 0;
  background-color: #333;
}

.main {
  min-height: 10%;
  flex-grow: 1;
  background-color: #555;
}

.footer {
  height: 50px;
  flex-grow: 0;
  background-color: #777;
}

.content {
  margin: 5px;
}

.content_big:checked + .resizer{
  height: 150vh;
}