Aligner les messages du l’expéditeurs a gauche et ceux du destinataire a droite

class=

.message {

  position: relative;
  background-color:#fff;
  margin-bottom:95px;
}

.message {
  background-color:#2195F2;
  padding:3px  8px;
  margin:3px  0;
  border-radius:12px;
  max-width:75%;
  display:inline-block;
  min-height:25px 

  

}
 .message .classpouraligneragauche 
 {
 background-color: #3498db;
 float:right;

 }
 .message .classpouralignerdroite
 {
 background-color: #dbc3c2;
 float:left;

 }

<?php
// Affichage des erreurs php ( à placer AU DEBUT de ton code.. AVANT tout le reste ! )
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

// connexion de la bdd ET activation des erreurs PDO
try{
  $bdd = new PDO("mysql:host=127.0.0.1;dbname=espace_membre;charset=utf8", "root", "");
  // Activation des erreurs PDO
  $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  // mode de fetch par défaut : FETCH_ASSOC / FETCH_OBJ / FETCH_BOTH
  $bdd->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch(PDOException $e) {
  die('Erreur : ' . $e->getMessage());
}

// initialisation des variables
$iesp ="5 " ;
$dest ="10" ;


// requête pour récupérer les infos du membre 
$sql = ("SELECT * FROM membres where id = :dest");
$datas = array(':dest'=>$dest);

//Execution de la requete
try{
  $requete = $bdd -> prepare($sql) ;
  $requete->execute($datas) ;
  $normal = $requete->fetch(); // tu n'attends qu'un seul résultat.. donc pas besoin de boucle
}catch(Exception $e){
  // en cas d'erreur :
   echo " Erreur ! ".$e->getMessage();
   echo " Les datas : " ;
  print_r($datas);
}

//requête pour récupérer les messages
$sql = ("SELECT * 
FROM messages 
WHERE (id_expediteur = :iesp and id_destinataire = :dest)
  or (id_destinataire = :iesp and id_expediteur = :dest)
  order by date DESC ");
$datas = array(':dest'=>$dest, ':iesp'=>$iesp);

//Execution de la requete
try{
  $requete = $bdd -> prepare($sql) ;
  $requete->execute($datas) ;
  $messages = $requete->fetchAll(); // On stocke le résultat dans un array
}catch(Exception $e){
  // en cas d'erreur :
   echo " Erreur ! ".$e->getMessage();
   echo " Les datas : " ;
  print_r($datas);
}


echo $normal ['pseudo'] ;
echo "<img src='".$normal['avatar']."' height='100' width='100'/>";
echo "<br>";


if(!empty($messages)){
  echo "<ul>";
  foreach($messages as $M){
   
    $idExp = $M['id_expediteur'];
    $message = htmlspecialchars($M['message']);
    $date = $M['date'];
    if ($idExp == $iesp ) {
      $class = "classpouraligneragauche";
    }else{
      $class = "classpouraligneradroite";
    }
    
    echo "<li class='".$class."' data-id='".$idExp."'>
           <span class='date'>".$date."</span>
           <span class='message'>".$message."</span>
          </li>";
   
  }
  echo "</ul>";  
}
   
?>