Éditeur Tryit de W3Schools

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}

.responsive-form {
max-width: 600px;
largeur: 100%;
border-radius: 4px;
bordure: 2px solide #D74444;;
couleur de fond:  #f2f2f2;
padding: 20px;
}

form {
afficher: flex;
flex-wrap: wrap;
justify-content: espace-entre;
}

label {
min-width: 48%;
marge-inférieure: 10px;
}

input[type=text], select {
min-width: 45%;
marge-inférieure: 10px;
bordure: 1px solide #ccc;
border-radius: 4px;
padding: 10px;
}

textarea {
min-width: 45%;
hauteur: 150px;
marge-inférieure: 10px;
bordure: 1px solide #ccc;
border-radius: 4px;
padding: 10px;
}

input[type=submit] {
largeur: 100%;
couleur-de-fond: #D74444;
couleur: blanc;
padding: 14px;
marge: 8px 0;
bordure: aucune;
border-radius: 4px;
curseur: pointeur;
}

@media screen and (max-width: 600px) {
étiquette,
input[type=text],
input[type=submit],
select, textarea {
flex: 100%;
min-width: 100%;
}
}
</style>
</head>

<body>
<h2>Formulaire réactif</h2>
<p>Redimensionnez l'écran pour voir le changement de mise en page du formulaire !</p>

<form action="https://www.w3schools.com/action_page.php">
   <label for="fname">Prénom :</label>
   <input type="text" id="fname" name="fname" placeholder="Your first name">

<label for="lname">Nom de famille :</label>
   <input type="text" id="lname" name="lname" placeholder="Your last name">

<label for="country">Pays:</label>
   <select id="country" name="country">
     <option value="australia">Australie</option>
     <option value="canada">Canada</option>
     <option value="usa">USA</option>
    </select>
    
    <label for="message">Message:</label>
    <textarea id="message" name="message" placeholder="Write something.."></textarea>

</div>

</body>

</html>