Align div, with form

Hello,

I’m having a problem with the development of my casting site.

I created a profile sheet for each user registered on my site.

The problem occurs on the mobile version, instead that the information is next to others (example: First name Paul)

They are one below the other.

Do you have an idea for me to solve this problem?

You can access a form by logging in with these identifiers:

Id : 226419

Password : Sss123&

This is my css code :

@media only screen and (min-width: 400px) {
.colgauche {
font-size: 5px;
width:50%;
display:inline-block;
}

PHP :

$user = wp_get_current_user();

$user_id = um_user('ID');
um_fetch_user( $user_id );
$meta_value = um_user('prenom_name');

echo $meta_value;

HTML :

<div class="colgauche">

<strong>Prénom</strong>

 

<strong>Nom</strong>

 

<strong>Date et lieu de naissance</strong>

 

<strong>Adresse postale</strong>

 

<strong>Adresse Mail</strong>

 

<strong>Numéro de mobile</strong>

</div>

<div class="colgauche">[wbcr_php_snippet id="567"]</div>

mobile version : https://francecasting.fr/wp-content/uploads/2019/05/Capture2.png
responsive version : https://francecasting.fr/wp-content/uploads/2019/05/capture1.png

The page I need help with: [log in to see the link]