Mise en place de flex

Bonjour à tous,
Pour info: En vue de réaliser une version imprimable, j'utilise un formulaire dont tous les champs sont affectés de l'attribut disabled afin de distinguer le css des étiquettes et le contenu des champs.

Mon problème est d'arriver à imbriquer une disposition horizontale secondaire dans la disposition verticale générale. J'ai étudié plusieurs tutos mais je n'y arrive pas.
Voici mon code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<body>
 
	<form method="post" action="" class="XL displCard">
		<p><input type="submit" value="Imprimer" onclick="window.print();" /> <input type="submit" value="Retour" formaction="http://omnes.proginet.local/parentPage.php?childPageKey=3" /></p><br/>
		<fieldset><legend>Chef de famille</legend>
			<div class="multiCols">
				<div class="div1">
					<label>Prénom</label><input type="text" value="Sophie" disabled /><br/>
					<label>Nom</label><input type="text" value="Duval" disabled /><br/>
					<label>Adresse</label><textarea cols="28" rows="4" disabled>500, route du Vieux Machin
Lieudit Ici
FR-00000 Saint Village</textarea><br/>
				</div>
				<div class="div2">
					<label>Tél. domicile</label><input type="text" value="0123456789" disabled /><br/>
					<label>Tél. portable</label><input type="text" value="0612345678" disabled /><br/>
					<label>Tél. travail</label><input type="text" value="" disabled /><br/>
					<label>Courriel</label><input type="text" value="" disabled /><br/>
				</div>
			</div>
		</fieldset>
				<fieldset><legend>Conjoint</legend>
			<div class="multiCols">
				<div class="div1">
					<label>Prénom</label><input type="text" value="David" disabled /><br/>
					<label>Nom</label><input type="text" value="Nom" disabled /><br/>
				</div>
				<div class="div2">
					<label>Tél. portable</label><input type="text" name="tel_portable" value="" disabled /><br/>
					<label>Tél. travail</label><input type="text" name="tel_travail" value="" disabled /><br/>
					<label>Courriel</label><input type="text" name="courriel" value="lui@wanadoo.fr" disabled /><br/>
				</div>
			</div>
		</fieldset>
						<fieldset><legend>Enfants</legend>
			<table>
				<tr><th>Prénom</th><th>Nom</th><th>Date de naissance</th></tr><tr><td>Mathilde</td><td>Nom</td><td>01/11/2011</td></tr><tr><td>Timothée</td><td>Nom</td><td>07/03/2016</td></tr>			</table>
		</fieldset>
			</form>
 
</body>

Dans cette structure, je souhaite avoir une disposition générale verticale.
Les div enfants des div avec la classe multicols, doivent eux être disposés horizontalement.
Après avoir lu plusieurs tutos sur le sujet, j'ai écrit le css suivant mais à l'intérieur de la disposition verticale générale, je bloque sur la disposition en rangées de la classe multicols:

Code:

1
2
3
4
5
6
7
8
form {
	display:flex;
	flex-direction:column;
}
.multicols {
	display:flex;
	flex-direction:row;
}