Flottement d'image avec paragraphe

Bonjour,

Je n'arrive malheureusement pas à faire flotter une image à droite d'un paragraphe, voici ce que je veux :

Mais bon, ça donne ça pour l'instant :


Voici mon code HTML/CSS :

HTML : <section id="content" class="container margin_top">

<div class="content_description">
<h4>Qui suis-je ?</h4>

<p class="flotte">
<img src=""quot;images/logo.png" alt="test" />
</p>
<p>Le Lorem Ipsum est simplement du faux texte employ� dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les ann�es 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour r�aliser un livre sp�cimen de polices de texte. Le Lorem Ipsum est simplement du faux texte employ� dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les ann�es 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour r�aliser un livre sp�cimen de polices de texte.Le Lorem Ipsum est simplement du faux texte employ� dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les ann�es 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour r�aliser un livre sp�cimen de polices de texte.</p>

CSS (flotte en bas de la feuille):

/* Content design */

#content{}
.content_list{list-style: none; display: flex; flex-wrap: wrap;}

.content_description{display: flex; flex-direction: column;}
.content_description>*{padding: 10px;}
.content_description h4{background: #3e8cd9; text-transform: uppercase; font-size: 20px; font-weight: 500; color: white;}
.content_description p{background: #272324; color: white; font-size: 1em; text-align: justify;}

/* Team */

#team{flex-direction: row;}
#team>li{display: flex; flex-direction: column; width: calc(100% * (1/5));}
#team img{display: flex; object-fit: cover; width: 100%; border: 4px solid black; box-sizing: border-box; }
#team li article{display: flex; flex-direction: row; justify-content: space-between; align-items: center; background: #3e8cd9; color: white;}

.team_name{display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; font-size: 16px; }
.team_name b{background: black; text-transform: uppercase; padding: 8px; margin-right: 10px;}



#team>li:not(:nth-last-child(-n+6)){margin-bottom: 20px;}
#team>li:not(:last-child){margin-right: 64px;}

/* Homepage */

.theater{display: flex; flex-direction: column;}
#theater_header{display: flex; flex-direction: row;}
#theater_header .theater_live, #theater_header .theater_chat{color: white; text-transform: uppercase; font-size: 1.1em; font-weight: normal; padding: 12px;
box-sizing: border-box;}

#theater_header .theater_live{background: #292526; display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
#theater_header .theater_live i:first-child{border: 2px solid white; padding: 6px 10px;}
#theater_header .theater_live aside i{margin-right: 8px;}
#theater_header .theater_live b{display: none;}

.expandTheater i{transition: .2s; cursor: pointer;}
.expandTheater i:hover{opacity: .45;}


#theater_header .theater_chat{background: #3e8cd9; display: flex; justify-content: center; align-items: center;}
#theater_header .theater_chat b{margin-right: 6px;}

#theater_content{display: flex; flex-direction: row; flex-wrap: wrap;}
.theater_live{flex-grow: 1;}

.theater_chat{min-width: 380px; width: 380px; position: relative;}
.theater_chat iframe{position: absolute; height:100%; width:100%}


#information{list-style: none; display: flex; flex-direction: row; justify-content: flex-start;}
#information li{background: #3e8cd9; color: white; display: flex; flex-direction: row; align-items: center; transition: .3s;
width: calc(100% * (1/2)); justify-content: center;}

#information li i{background: #242021; margin-right: 16px; min-width: 24px; text-align: center; padding: 14px; font-size: 1.2em; overflow: hidden;}
#information li a{flex: 1; text-transform: uppercase;}

#information li:not(:last-child){margin-right: 1.4em;}

#information li:hover{opacity: .75;}



/* Theater fullscreen */

.fullscreen{overflow: hidden;}

.fullscreen #theater .expandTheater{display: block;}

.full_screen{height: 100%; overflow: hidden;}
.fullscreen #theater{position: fixed; top: 0; left:0; bottom: 0; right: 0; padding-top: 0; z-index: 1;}
.fullscreen #theater iframe{height: calc(100vh - 50px);}


/* Night */

.night{background: #0f0f0e;}


.flotte {
float:right;
}

Merci pour vos réponses d'avance.