JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="left">
  Placeholder
</div>
<p class="right">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula purus, lobortis luctus malesuada vitae, egestas quis lorem. Mauris ultrices mauris et enim dictum fermentum. Nam nibh nulla, posuere ut egestas a, fringilla ac augue. Vivamus sed eros eget purus maximus iaculis. </p>
</div>

CSS

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

.container {
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: row;
  border-radius: 0.25rem;
  margin: 1rem;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
}

.left {
  margin: auto;
  width: 25%;
  height: 100%;
  border-width: 1px;
  border-style: solid;
  transition-property: width;
  transition-duration: 300ms;
  padding: 1rem;
}

.left:hover {
  width: 50%;
}

.right {
  width: auto;
  margin: auto;
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 1rem 4rem;
  border-width: 1px;
  border-style: solid;
}