[FIXED] How to keep the text of one of two columns aligned with top titled image of other column after title becomes two lines because of browser size change

Issue

I have two divs side by side inside a wrapper div. In the left column, there is an image with a title above. In the right column, there is a number of links. The links div has some top padding to align text of first link with image in left column. But when screen size changes, the image title over the image inside left column breaks into two lines. When this happens the text on right div is not aligned with the image anymore. I'm lost here as I'm trying to solve this with css. Any ideas?

What I want is to align text in right div with image in left div no matter how many lines it takes to print the tile.

.wrapper 
{
width: 90%;
margin: auto;
background: #fff;
display:flex;
}
.col1 
{
width: 48%;
background: #ccc;
float: left;
overflow: hidden;
}
img.col1 {
	width: 100%;
	height: auto;
}
.col2 
{
width: 49%;
margin-left: 1em;
background: #000;
float: right;
color:white;
}
.text 
{
	padding-top: 59px;
}
.yellow {
	color: #ccc;
	font-weight: 600;
	clear:both;
	font-family: arial;
	
}

<div class="main">
<div class="wrapper">
<div class="col1"><h4>Lorem ipsum dolor sit amet consect</h4><a href="/index.php/cine/item/100007-manual-para-criticos-intensos-de-cine-sobre-holy-motors"><img src="https://www.elnuevocojo.com/modules/mod_news_pro_gk4/cache/k2.items.cache.633464537f5b069fc4760ed3327b136c_Lnewspro1.jpg"></a>
</div>
<div class="col2">
<div class="text">
<span class="yellow">This text is aligned with image, but when viewport gets smaller and image title takes two lines, text is not aligned anymore.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>

Solution

Well if you cannot change the HTML structure one solution would be: Add a <h4> with the same content to the col2 with the same content as the one from col1. I don;t know if that is feasible for you. Let me know and i can find another solution ( hopefully )

Also, do not use float just take advantage of flexbox

See below

.wrapper {
  width: 90%;
  margin: auto;
  background: #fff;
  display: flex;
}

.col1 {
  background: #ccc;
  overflow: hidden;
}

img.col1 {
  width: 100%;
  height: auto;
}

.col {
  flex: 0 0 calc(50% - 0.5em);
}

.col2 {
  background: #000;
  color: white;
  margin-left: 1em;
}
.col2 h4 {
  visibility:hidden;
}
.text {
  
}

.yellow {
  color: #ccc;
  font-weight: 600;
  clear: both;
  font-family: arial;

}

<div class="main">
  <div class="wrapper">
    <div class="col1 col">
      <h4>Lorem ipsum dolor sit amet consect</h4><a href="/index.php/cine/item/100007-manual-para-criticos-intensos-de-cine-sobre-holy-motors"><img src="https://www.elnuevocojo.com/modules/mod_news_pro_gk4/cache/k2.items.cache.633464537f5b069fc4760ed3327b136c_Lnewspro1.jpg"></a>
    </div>
    <div class="col2 col">
      <div class="text">
       <h4>Lorem ipsum dolor sit amet consect</h4>
        <span class="yellow">This text is aligned with image, but when viewport gets smaller and image title takes two lines, text is not aligned anymore.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>

Answered By - Mihai T

Answer Checked By - David Marino (PHPFixing Volunteer)