Want to make contentless div responsive to height of adjacent div

Question

Making a Reactjs app. Referring to the code, I would like to make the height of the colorTab div, equal and responsive to that of the content div. The height of content must be dynamic given that I would like it to be defined by the amount of text in tile + description, which is variable, and the width of the window.

Currently, when I omit min-height from colorTab's CSS and simply have height: 100%; defining colorTab's height, colorTab disappears. Adding the min-height gives it that height but then it becomes unresponsive to the height of content which is the goal. How do I solve this issue?

JSX:

<div className="wrapper">
  <div className="colorTab" style={color}>

  </div>
  <div className="content">
    <tr>
      <td className="title">
        <a href={link}>{title}</a>
      </td>
    </tr>
    <tr>
      <td className="description">
        {description}
      </td>
    </tr>
  </div>
</div>

CSS:

.wrapper {
  min-height: 48px;
  overflow: hidden;
}

.colorTab {
  float: left;
  position: relative;
  width: 5px;
  min-height: 48px;
  height: 100%;
  border-radius: 5px;
  margin-left: 15px;
}

.title {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.description {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

Answer 1

Flexbox will offer the functionality you need.

Put display: flex on your container class. And flex: 1 on your content div. No matter how much content you place in the content div the colorTab div will match its height.

Example in pure HTML/CSS (no React):

.wrapper {
  overflow: hidden;
  display: flex;
}

.colorTab {
  position: relative;
  width: 5px;
  border-radius: 5px;
  background: red;
}

.content {
  flex: 1;
}

<div class="wrapper">
  <div class="colorTab">
  
  </div>
  <div class="content">
      <div class="title">
        <a>Your Title</a>
      </div>
      <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
      </div>
  </div>