Align each text correctly with It's respective image - html

Question

I want to make a list of fish with their respective descriptions aligned with their image. As you can see, "Saumon" is roughly aligned with it's image, but "Truite" isn't at all, so much that it's with a wrong image. How can I align it correctly with all window sizes? Thank you in advance.
Here is my code
<img class="imgfish" src="/images/saumon.png" alt="Saumon" />
<h3 class="titlefish">Saumon</h3>
<p>
Le saumon est un poisson gras à la chair rosée, de la même famille que la
truite ou l'omble. Il nait et se reproduit en eau douce, mais vit dans
l'océan. Il existe plus de 60 sortes de saumon et il a été le poisson le
plus consommé sur terre depuis la préhistoire.
</p>
<img class="imgfish" src="/images/truite.png" alt="Saumon" />
<h3 class="titlefish">Truite</h3>
<p>
La truite est un poisson que l’on pêche dans les rivières et les lacs.
Elle appartient à la famille de salmonidés qui comprend entre autres, le
saumon, le touladi, l’omble chevalier. La truite est une excellente source
d’acides gras omégas-3, reconnus pour limiter l’apparition de certains
cancers et certaines maladies cardio-vasculaires.
</p>
CSS
.imgfish {
float: left;
clear: left;
width: 400px;
padding-top: 0rem;
border-radius: 15px;
max-width: 40vw;
margin: 30px;
}
.titlefish {
margin-bottom: 1rem;
}
And here are the results

Answer 1

As I mention in the comment you need to use "grid layout".
body{
display: flex;
justify-content: center;
align-items: center;
}
#container {
display: grid;
grid-template-columns: 0.5fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
"a b"
"c d"
"e f";
row-gap: 5px;
width: 80%;
height: 100%;
}
img{
max-width: 400px;
max-height: 400px;
}
#container:nth-child(1){
/*First Image*/
grid-area: a;
}
#container:nth-child(2){
/*Description of first image*/
grid-area: b;
}
<div id="container">
<img class="imgfish" src="https://images.unsplash.com/photo-1633885096653-53ea6830e77a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80" alt="Saumon" />
<div class="description">
<h3 class="titlefish">Saumon</h3>
<p>
Le saumon est un poisson gras à la chair rosée, de la même famille que la
truite ou l'omble. Il nait et se reproduit en eau douce, mais vit dans
l'océan. Il existe plus de 60 sortes de saumon et il a été le poisson le
plus consommé sur terre depuis la préhistoire.
</p>
</div>
<img class="imgfish" src="https://images.unsplash.com/photo-1633884941685-dd89adc11ab8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80" alt="Saumon" />
<div class="description">
<h3 class="titlefish">Truite</h3>
<p>
La truite est un poisson que l’on pêche dans les rivières et les lacs.
Elle appartient à la famille de salmonidés qui comprend entre autres, le
saumon, le touladi, l’omble chevalier. La truite est une excellente source
d’acides gras omégas-3, reconnus pour limiter l’apparition de certains
cancers et certaines maladies cardio-vasculaires.
</p>
</div>
<img class="imgfish" src="https://images.unsplash.com/photo-1633884941685-dd89adc11ab8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80" alt="Saumon" />
<div class="description">
<h3 class="titlefish">Something else</h3>
<p>
La truite est un poisson que l’on pêche dans les rivières et les lacs.
Elle appartient à la famille de salmonidés qui comprend entre autres, le
saumon, le touladi, l’omble chevalier. La truite est une excellente source
d’acides gras omégas-3, reconnus pour limiter l’apparition de certains
cancers et certaines maladies cardio-vasculaires.
</p>
</div>

Answer 2

You should post your code to have a specific answer.
You could put the image and its description within the same parent div, you could use a table, etc. It depends on your current code.