How to synchronize heights of to elements - html

Question

How can I synchronize the height of an image with the height of a text area, depending on the screen size? I do not want to use the left border of the text area because I want a visual separation between the left bar and the text. I do not want the width of the bar to be adjusted simultaneously, because it is only a visual separator in the page; the bar should be just as long as the text on its right side.
NB: the bar is not restricted to an image; it can be anything as long as the result is a colored vertical bar with the correct height.
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #fff8dc;
color: grey;
font-family: Arial;
font-size: 1em;
position: relative;
min-height: 100%;
}
.common {
background-color: #fff8dc;
float: left;
width: 25%;
height: 100vh;
text-align: center;
padding: 0 40px 10px 40px;
}
.detail {
background-color: #fff8dc;
float: left;
margin: 0 20px 0 0;
overflow: auto;
height: 100%
}
.text {
margin: 0px 40px 0px 40px;
background-color: #ffffff;
padding: 10px 20px 10px 20px;
}
<div class="common">
<p>blabla</p>
</div>
<div>
<div class="detail">
<img src="widgets/spacer.gif" alt="vertical bar" width="30px" height="400px" style="background-color: #E3B90A;">
</div>
<div class="text">
<h1>BLABLA</h1>
<p>blablabla</p>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>

Answer 1

You can do it this way:
HTML:
<div class="common">
<p>blabla</p>
</div>
<div class="container">
<div class="detail">
<img src="widgets/spacer.gif" alt="vertical bar">
</div>
<div class="text">
<h1>BLABLA</h1>
<p>blablabla</p>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
CSS:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #fff8dc;
color: grey;
font-family: Arial;
font-size: 1em;
position: relative;
min-height: 100%;
}
.container{
display: flex;
flex-direction: row;
}
.common {
background-color: #fff8dc;
float: left;
width: 25%;
height: 100vh;
text-align: center;
padding: 0 40px 10px 40px;
}
.detail {
background-color: #E3B90A;
width: 30px;
height: auto;
}
.detail img{
width: 100%;
height: auto;
}
.text {
width: 100%;
background-color: #ffffff;
padding: 10px 20px 10px 20px;
}
Fiddle: https://jsfiddle.net/debraj/s84yxh8L/