Div alignment

Question

I own a table that is built dynamically with the information of a film director. And I need to change the structure to a div, mainly for the issue of responsibility, today by reducing the size of the component that stores this table, the text ends up overlapping;

Today she’s like this:

.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 div I managed to do much of the work, however some things like the alignment present in the Labels I could not do at all:

.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>

Have some way to preserve this alignment of the Labels as if it were in the table only with HTML?

Or I will have to work with JS to try to check the width of the Labels and set as the largest element?

Answer 1

Add in the . Father

width:30%;

See if it solves your problem

.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 ;
  width:30%;
}

.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>

Answer 2

If you want to keep cell dimensions as with Tables, working with the CSS display attribute can solve your problem.

Display attributes corresponding to table elements:

table { display : table}
tr { display : table-row}
thead { display : table-header-group }
tbody { display : table-row-group}
tfoot { display : table-footer-group }
col { display : table-column}
colgroup { display : table-column-group }
td, th { display :  table-cell }
caption { display : table-caption }

Source: maujor.com

Applied to your code would look like this:

.label{
  font-weight: bold;
  text-align: right;
  display: table-cell;
  margin-right: 5px
}

.blue-box{
  background-color: aquamarine;
  overflow: hidden;
  display: table;
}

.father{
  margin: 0px 5px 0px 5px ;
  display: table-row
}

.content{
  padding-left: 10px;
  display: table-cell;
}

<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>