JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">

  <aside>наведи</aside>
<main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos impedit eos cum adipisci natus id dolores laborum necessitatibus. Voluptates voluptatibus dolor dolorem qui laborum quas enim perspiciatis dolorum, vel minima sed sapiente magnam aperiam, id veniam voluptas nesciunt, facilis expedita odit in ad non! Illo quod repellat enim quidem sequi reiciendis deleniti perspiciatis atque aut tenetur laborum numquam a quis assumenda vero, quaerat aliquam. Optio numquam consectetur nihil nostrum ex voluptatum, totam inventore doloremque fugiat similique adipisci reiciendis ipsum veniam voluptatibus, quod excepturi tempore aliquid, blanditiis exercitationem. A modi voluptatum laudantium cupiditate minus tempore maxime, mollitia magnam dolor pariatur quod veniam impedit sapiente ea itaque natus similique, cumque aut excepturi sint dolorum! Eum, illo reprehenderit possimus, minus quibusdam ratione omnis. Perferendis dolore nemo sunt est vero eos iure, inventore odio totam, omnis accusantium officiis! Sequi dignissimos, sed voluptates? Quasi totam veniam magni nostrum, itaque provident, ullam suscipit architecto voluptatum rerum a placeat in, laborum ipsa tempora neque minima, tempore quidem facere laudantium repudiandae et alias. Dignissimos perferendis vitae soluta mollitia obcaecati assumenda eius provident similique modi, quasi animi nemo maxime facilis voluptatum voluptas dolore labore praesentium! Nihil obcaecati ullam, id inventore, aspernatur blanditiis incidunt in quas dolores, totam dolorum nemo?</main>
</div>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.block {
  display: flex;
  height: 100%;
}
aside {
  background: #eee;
}
aside:hover{
  width: 200px;
}
main {
  flex: 1;
}