Problème bloc en float

Bonjour,

J'aimerai créer deux bloc en html / css. A gauche une image et à droit mon texte. Là il y a pas de souci j'y arrive. Je veux que mon image reste collé à droite en float là aussi pas de problème. Mon image est grande elle fait un peu près la moitié de la section.

Ce que j'arrive pas:

Quand je réduis ma page pour tester pour responsive mon texte passe en dessous de l'image .Ce ce que je veux c'est que le bloc texte reste stable et qu'il se réduit en fonction que la page se réduit avec mes medias queries.

Voici un exemple : https://hostmarked.dk/ (la deuxième section)

Et voici mon code

<section class="realisations clearfix">

	<div class="container-realisation ">

		<div class="description-realisation">

			<h3>Dernier projet</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
			<br>sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. <br> Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris <br> nisi ut aliquip ex ea commodo.</p>

		
		</div>

	</div>

	<div class="container-realisation">
		<img src="images/mon-image.png">
	</div>

	
</section>

.realisations{
margin: auto;
padding-bottom: 200px; 
}

.container-realisation{
float: right;
width: 50%;
}