Bonjour, je dois faire un exercice dans lequel il m'est demandé de reproduire une page web qui contient des images et du texte.

Je pense avoir déjà fait une partie mais rien ne s'aligne comme je le voudrai.

quelqu'un peut-il me mettre sur la bonne voie pour aligner tout cela ?

Remerciements

voici mon html

<div class="container">

						<!-- colonne gauche -->
<div id="gauche" class="col-1 fl-l">


<article class="specificity">
		<a href="#">
		<img src="img_exercice/mont1.jpg" width="370" height="273" alt="les militaires armés" title="les militaires armés">
		</a>
		<h3>Une dizaine de militaires armés</h3>
		<p class="meta">
		<span class="author"> Antoine Dellec</span> 
		<span class="date">, le 27 avril 2025</span>
		</p>
		<p>Il allait peut-être perdre Florence avant même de lui avoir avoué son amour. 
			Il devait empêcher Prélude de continuer dans son délire. 
			Mais comment pouvait-il stopper ce parasite créé par lui quelques années auparavant ?</p>
		
<div class="clear"></div>
			
	
<article class="specificity">
		<a href="#">
		<img src="img_exercice/mont2.jpg" width="370" height="273" alt="une informacienne" title="une informacienne">
		</a>
		<h3>Informaticienne chevronnée</h3>
		<p class="meta">
		<span class="author"> Dider Paltier Dellec</span> 
		<span class="date">, le 12 mai 2002</span>
		</p>
		<p>Interloqué, David ne sait pas quoi répondre. 
			En effet, il connaît un certain Prélude : lui. C’était le pseudo qu’il utilisait 
			dans sa jeunesse d’informaticien. Tout ses amis de l’époque le connaissaient sous ce nom.</p>
	
<div class="clear"></div>
</div>
					<!-- fin colonne gauche -->
<div class="clear"></div>

						<!-- colonne droite -->	
<div id="droite" class="col-2 fl-r">
	
<div class="product">
	<img src="img_exercice/product1.png" width="184" height="187" alt="rapport annuel 2017" title="rapport annuel 2017"/>
</div>
	
<div class="clear"></div>		
<div class="product">
	<img src="img_exercice/product1.png" width="184" height="187" alt="rapport annuel 2016" title="rapport annuel 2016"/>
</div>
<div class="clear"></div>
					<!-- fin colonne droite -->

</div>

 mon css

.container {
font-size:18px;
margin:0px auto;
width:1024px;
padding-top:45px;
background-color: white;
display: flex;
}

.col-1 {
width:60%;
margin: 0 10px;
float: left;
}

.col-2 {
width:40%;
margin: 5px 0;
float: right;
}

.author {
color: aqua;
}

.date {
font-style: italic;
}

.specifiity p{
font-size: 15px;
line-height:130%;
padding-bottom: 3px;
}

.product {
width:200px;
background-color: #FFFFFF;
display:inline-block;
height:271px;
}

 et ce que je dois obtenir