Structuring HTML to PDF

Question

I am trying to create a template for PDF generation, which will serve for order label.

I wanted to structure everything in place. As it is PDF, I cannot use Boostrap or any other facilitator, only HTML and CSS code.

<style>
    .conteudo {
        font-size: 10px;
    }
    .destaque-1 {
        font-size: 14px;
        line-height: 2px;
    }
    .destaque-2 {
        line-height: 2px;
    }
    .destaque-3 {
        font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
        line-height: 2px;
    }
    .tabela-de-nutrientes{
        float: right;
    }
    tr,td {
        border: 1px solid #0a0a0a;
    }
    .qrcode{

    }
</style>
<div class="conteudo">

    {{-- Dados do cliente / pedido / produto --}}
    <div class="pedido">
        <p class="destaque-1">{{ $item->product->name }}</p>
        <p class="destaque-2">{{ $item->order->client->user->name }}</p>
        <p class="destaque-3">{{ $item->order->id }}</p>
    </div>
    {{-- Dados do cliente / pedido / produto --}}


    {{-- Dados Nutricionais // Inicio --}}
    <table class="tabela-de-nutrientes" cellspacing="0">
        <tr>
            <th colspan="2">Quantidade Por Porção: 100G (1 Porção)</th>
        </tr>
        @foreach($item->product->nutrients as $nutrient)
            <tr>
                <td>{{$nutrient->name}}</td>
                <td>{{$nutrient->pivot->amount}} {{$nutrient->unity}}</td>
            </tr>
        @endforeach

    </table>
    {{-- Dados Nutricionais // Fim --}}


    {{-- Ingredientes ou Componentes // Inicio--}}
    <div class="ingredientes-componentes">
        <p> ingredientes: lorem ipsum, lorem ipsum </p>
    </div>
    {{-- Ingredientes ou Componentes // Fim--}}

    <div>
        <p>peso: 300g</p>
    </div>

    {{-- QRCODE --}}
    <img class="qrcode" src="data:image/png;base64, {{ $qrcode }} ">
    {{-- QRCODE --}}


    {{-- conservação // Inicio--}}
    <div>
        <p class="destaque-1">Conservação</p>
        <p class="destaque-3">A partir da data de fabricação, consumir em até:</p>
        <table>
            <tr>
                <td> GELADEIRA </td>
                <td> 6 Dias </td>
            </tr>
            <tr>
                <td> FREEZER </td>
                <td> 6 Meses </td>
            </tr>
        </table>
    </div>
    {{-- conservação // Fim  --}}

    {{-- Fabricacao --}}
    <div>
        <p class="destaque-2">Data de Fabricação:</p>
        <p>{{ $item->created_at->format('d/m/y') }}</p>
    </div>
</div>

Answer 1

There are several ways to make this layout, here is a simple option made with CSS Grid, here is a good didactic Full Guide: https://css-tricks.com/snippets/css/complete-guide-grid/

First put the .conteiner 100% tall with height:100%

Then notice that I determine how many columns will have in the grid, in this case I divided into 4 columns of equal size 1fr

grid-template-columns: repeat(4, 1fr);

Now the ranks, divided into 3 rows of equal size 1fr

grid-template-rows: repeat(3, 1fr);

Now I determine the areas that each section will occupy with

grid-template-areas: 
    "nome nome tabela tabela"
    "ingre qr tabela tabela"
    "peso info cons data";

For this to work you need to declare the grid-area: nome; for each section

.nome {
    grid-area: nome;
}

Ready your Grid is 100% responsive

---

See the code used to get the image result above:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: 
    "nome nome tabela tabela"
    "ingre qr tabela tabela"
    "peso info cons data";
}
.nome {
    grid-area: nome;
}
.tabela {
    grid-area: tabela;
}
.ingre {
    grid-area: ingre;
}
.qr {
    grid-area: qr;
}
.peso {
    grid-area: peso;
}
.info {
    grid-area: info;
}
.cons {
    grid-area: cons;
}
.data {
    grid-area: data;
}
section {
  box-sizing: border-box;
  border: 1px solid;
}

<div class="container">
  <section class="nome">nome</section>
  <section class="tabela">tabela</section>
  <section class="ingre">ingre</section>
  <section class="qr">qr</section>
  <section class="peso">peso</section>
  <section class="info">info</section>
  <section class="cons">cons</section>
  <section class="data">data</section>
</div>