I have a list that I want to be divided into 2 columns, for this, I used this code:
.fila {
display: flex;
}
.columna {
display: flex;
width: 33%;
margin: 0px;
align-items: center;
}
#contenido {
background-color:none;
float:left;
width:100%;
padding:15px;
margin-top:7px;
text-align:left;
}
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="flex-container" id="contenido">
<div style="flex-grow: 10" >
<h1 class="receta">Ingredientes</h1>
<p class="contenido" style="text-align: left">
<div class="ingredientes">
<div class="fila">
<p class="columna">
<i class="material-icons" style="font-size:24px; color: DarkSlateBlue">play_arrow</i>
2 huevos.
</p>
<p class="columna">
<i class="material-icons" style="font-size:24px; color: DarkSlateBlue">play_arrow</i>
30 g de mantequilla pomada.
</p>
<p class="columna">
<i class="material-icons" style="font-size:24px; color: DarkSlateBlue">play_arrow</i>
1 vaso de leche.
</p>
</div>
<div class="fila">
<p class="columna">
<i class="material-icons" style="font-size:24px; color: DarkSlateBlue">play_arrow</i>
30 g de azúcar.
</p>
<p class="columna">
<i class="material-icons" style="font-size:24px; color: DarkSlateBlue">play_arrow</i>
220 g de harina de trigo
</p>
</div>
<div class="fila">
<p class="columna">
<i class="material-icons" style="font-size:24px; color: DarkSlateBlue">play_arrow</i>
1 trocito de mantequilla.
</p>
<p class="columna">
<i class="material-icons" style="font-size:24px; color: DarkSlateBlue">play_arrow</i>
1/2 cucharadita de levadura química.
</p>
</div>
</div>
</p>
</div>
</div>
</body>
</html>
But on the web it looks like this
Following the pattern of your code, you should only create another one
<div class="fila">
and add the third tag<p>
that you have in the first onediv
in the following way and change the percentage of the column class bywidth: 50%;
so that it covers the entire page.In your html you actually have 3 columns defined, you can use the following style:
Example: