How to align labels on a div layout - html

Question

I have a html table, which shows informations about a movie.
I am trying to change this table to a div layout because of the responsiveness. With table when I reduce the window widht, the text overlaps.
this is my table:
.label{
font-weight: bold;
text-align: right;
}
.blue-box{
background-color: green
}
<div class="blue-box">
<table>
<tr>
<td class="label">Nome:</td>
<td>Del Toro</td>
<td class="label">Data de cadastro:</td>
<td>19/05/2017</td>
<td class="label">Data de atualizacao:</td>
<td>19/05/2017</td>
</tr>
<tr>
<td class="label">Categoria de produto:</td>
<td>Diverso</td>
<td class="label">Ultimo Prêmio:</td>
<td>Leão De Ouro</td>
<td class="label">Filme Indicado</td>
<td>Shape of Water</td>
</tr>
</table>
<div>
</div>
with divs I was able to do much of the transformation, but with the labels itself, I can't figure out a way to align the labels like when I use the table layout:
.label{
font-weight: bold;
float: left;
text-align: right;
display: inline;
margin-right: 5px
}
.blue-box{
background-color: aquamarine;
overflow: hidden;
}
.father{
float: left;
margin: 0px 5px 0px 5px ;
}
.content{
float: left;
display: inline;
}
<div class="blue-box">
<div class="father">
<div class="label">
Nome:
</div>
<div class="content">
Del Toro
</div>
</div>
<div class="father">
<div class="label">
Data de cadastro:
</div>
<div class="content">
19/05/2017
</div>
</div>
<div class="father">
<div class="label">
Data de atualizacao:
</div>
<div class="content">
19/05/2017
</div>
</div>
<div class="father">
<div class="label">
Categoria de produto:
</div>
<div class="content">
Diverso
</div>
</div>
<div class="father">
<div class="label">
Ultimo Prêmio:
</div>
<div class="content">
Leão de Ouro
</div>
</div>
<div class="father">
<div class="label">
Filme indicado:
</div>
<div class="content">
Shape of water
</div>
</div>
</div>
What I'm missing? There's no way to achieve this with only HTML?

Answer 1

First of all, if responsiveness is what you're after, you need to find the way to employ a responsive framework, Boostrap or Material UI (flexbox base) This will solve a lot of your problems at different brakpoints of the viewport without bloating your stylesheet with media queries. Second, you need to modify your HTML to allow for compartmentalization of containers. Responsiveness works best when you use compartmentalization and specificity.
Here is how I would rework your HTML and solve the alignment issue with fair amount of CSS
.row {
width: 100%;
display: inline-block;
margin: 10px auto;
background: green;
}
.col4 {
display: inline-block;
width: 33.33333333%;
margin: 1% 0 1% 0;
position: relative;
padding-right: 15px;
float: left;
padding-left: 15px;
min-height: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.col4 div{
display: inline-block;
}
label{
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
<div class="row">
<div class="col4">
<div>
<label>Nome:</label>
<span>Del Toro</span>
</div>
<div>
<label>Categoria de produto:</label>
<span>Diverso</span>
</div>
</div>
<div class="col4">
<div>
<label>Data de cadastro:</label>
<span>19/05/2017</span>
</div>
<div>
<label>Ultimo Prêmio:</label>
<span>Leão De Ouro</span>
</div>
</div>
<div class="col4">
<div>
<label>Data de atualizacao:</label>
<span>19/05/2017</span>
</div>
<div>
<label>Filme Indicado:</label>
<span>Shape of Water</span>
</div>
</div>
</div>
See the example here in my CODEPEN (just change the values in your HTML)
Now, here is one with Bootstrap. Check out how I was able to produce the same and IT IS RESPONSIVE without making any additional media queries. Just by using the classes container, row, and col-xs-12 col-sm-4
Boostrap is very documented here
muito fácil, né!

Answer 2

.blue-box{
background: green;
padding: 1rem;
}
.father{
display: inline-block;
margin: .5rem;
}
.label{
font-weight: bold;
float: left;
width: 80px;
}
.content{
float: left;
width: 70px;
}
<div class="blue-box">
<div class="father">
<div class="label">
Nome:
</div>
<div class="content">
Del Toro
</div>
</div>
<div class="father">
<div class="label">
Data de cadastro:
</div>
<div class="content">
19/05/2017
</div>
</div>
<div class="father">
<div class="label">
Data de atualizacao:
</div>
<div class="content">
19/05/2017
</div>
</div>
<div class="father">
<div class="label">
Categoria de produto:
</div>
<div class="content">
Diverso
</div>
</div>
<div class="father">
<div class="label">
Ultimo Prêmio:
</div>
<div class="content">
Leão de Ouro
</div>
</div>
<div class="father">
<div class="label">
Filme indicado:
</div>
<div class="content">
Shape of water
</div>
</div>
</div>

Answer 3

You can achieve almost the same result as table using DIV and CSS,
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
Gross but sometimes useful.
</div>
</div>
</div>
have a look at https://css-tricks.com/almanac/properties/d/display/
the advantage of using this is that you have some extra features like vertical-align having it set up like this.
if you want me to modify your code to something like this. give me a buzz.