JSFiddle - React, Tailwind, and code Playground

HTML

<div class="resize-container">
  <div class="row">
    <div class="hover-part">
      <span>Row 1. Hover here to resize height</span>
      <div class="extra">
        <span>Lorem ipsum dolor sit amet
        123456789009876543211234567890098765432112345678900987654321
        </span>
      </div>
    </div>
    <div class="input-part">
      <input type="text"/>
    </div>
  </div>

  <div class="row">
    <div class="hover-part">
      <span>Row 2. Hover here to resize height</span>
      <div class="extra">
        <span>Lorem ipsum dolor sit amet</span>
      </div>
    </div>
    <div class="input-part">
      <input type="text"/>
    </div>
  </div>
  
  <div class="row">
    <div class="hover-part">
      <span>Row 3. Hover here to resize height</span>
    </div>
    <div class="input-part">
      <input type="text"/>
    </div>
  </div>
  
  <div class="row">
    <div class="hover-part">
      <span>Row 4. Hover here to resize height</span>
    </div>
    <div class="input-part">
      <input type="text"/>
    </div>
  </div>
</div>

CSS

.resize-container {
  line-height: 1.15;
  /* resizing can affect x and y position */
  overflow: auto;
  resize: both;
  border: 1px solid black;
}

.row {
  display: flex;
  gap: 4px;
  padding: 2px;
}

.hover-part {
  flex: 0 0 50%;
  background-color: lavender;
  
  & > .extra {
    display: none;
    background-color: lightgreen;
    /* fractions of pixels (em) affecting it */
    font-size: 0.9em;
    padding-bottom: 0.1em;
  }
}

.hover-part:hover {
  /* fractions of pixels (em) affecting it */
  min-height: 2.6em;
  /* scroll can affect it */
  overflow-y: auto;
  
  & > .extra {
    display: block;
  }
}

.input-part > input {
  flex: 0 0 50%;
  box-shadow: 0 0 1px 1px red;
}