This is the standard format of the page:
* {
margin: 0;
padding: 0;
}
img {
width: 100%;
float: left;
}
#grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
#test-one {
grid-column-start: 1;
grid-column-end: 2;
width: 100%;
height: 300px;
}
#test-two {
grid-column-start: 2;
grid-column-end: 3;
width: 100%;
}
#test-three {
grid-column-start: 2;
grid-column-end: 3;
width: 100%;
}<div id="grid">
<div id="test-one"><img src="https://upload.wikimedia.org/wikipedia/commons/9/97/Feral_cat_Virginia_crop.jpg"></div>
<div id="test-two">
<h2> Hello </h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</div>
<div id="test-three">
<h2>Please no gap to top text with the "Hello" headline</h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
</div>The image will maintain a set height, while the text sections will adjust based on content length. There should be no vertical gap between text blocks with the IDs #test-two and #test-three. Is this achievable with CSS adjustments or does the layout require restructuring?
Note: I am uncertain if tweaking the grid-row settings would resolve the issue due to variable heights. Please advise if my assumption is incorrect.