A gambiarra do &nbsp

[Frank K Hosaka]

Estou estudando Tailwinds com o Copilot, estou aprendendo a usar o marcador <div>.

Para colocar uma <div> em cima da outra, você não precisa fazer nada.

Para colocar uma <div> do lado da outra, aí você precisa usar <div class="flex">.

Para colocar diferentes números de <div> em cada linha, aí você precisa usar <div class="flex flex-wrap">. O problema é alinhar as colunas. O Tailwinds tem ótimas ferramentas para fazer ajustes, do tipo margem negativa. Isso é uma grande maravilha, desde que a linha não seja sombreada. O Copilot ofereceu uma sugestão, mas o código iria ficar enorme. Eu resolvi apelar para a velha gambiarra do &nbsp. Mas eu tive que usar 7 &nbsp. Na internet encontrei a sugestão do &ensp, ele é maior que o &nbsp:
 

arquivo outrosView.blade.php
@include('menuView')
<script>
    btmenu.innerHTML = 'Outros';
    document.title = "Outros";
</script>

<div class="px-2 bg-gray-200"><a href="estoqueBaixar">Baixar Estoque</a></div>
<div class=px-2><a href="balanceteTBW">Criar tbw</a></div>
<div class="px-2 bg-gray-200"><a href="produtoDescontinuar">Descontinuar Produto</a></div>
<div class=px-2><a href="estoqueDiferenca">Diferença no Estoque</a></div>
<div class="px-2 bg-gray-200"><a href="blingDiferenca">Diferença na Bling</a></div>
<div class=px-2><a href="estoqueEntrada">Entrada de Produtos</a></div>
<div class="px-2 bg-gray-200"><a href="outrosMegaSena">Mega-Sena</a></div>
<div class=px-2><a href="estoqueNota">Nota do Fornecedor</a></div>
<div class="px-2 bg-gray-200"><a href="blingFalta">Nota Faltante</a></div>

<div class="flex flex-wrap">
    <div class="w-1/2 px-2">session('codp')</div>
    <div class="w-1/2">{{$sessao['codp']}}</div>
    <div class="w-1/2 px-2 bg-gray-200">session('pessoa')</div>
    <div class="w-1/2 bg-gray-200">{{$sessao['pessoa']}}</div>
    <div class="w-1/2 px-2">session('criterio')</div>
    <div class="w-1/2">{{$sessao['criterio']}}</div>
    <div class="w-1/2 px-2 bg-gray-200">session('criterioPessoa')</div>
    <div class="w-1/2 bg-gray-200">{{$sessao['criterioPessoa']}}</div>
    <div class="w-1/2 px-2">session('dia')</div>
    <div class="w-1/2">{{dbr($sessao['dia'])}}</div>
    <div class="w-1/2 px-2 bg-gray-200">session('end')</div>
    <div class="w-1/2 bg-gray-200">{{$sessao['end']}}</div>
    <div class="w-1/2 px-2">session('id')</div>
    <div class="w-1/2">{{$sessao['id']}}</div>
    <div class="w-1/2 px-2 bg-gray-200">session('lcto')</div>
    <div class="w-1/2 bg-gray-200">{{$sessao['lcto']}}</div>

    <div class="w-1/3 px-2">env('lctoBaixaEstoque')</div>
    <div class="w-1/3 text-center ml-4">{{$baixa}}</div>
    <div class="w-1/3 text-right text-red-500 -ml-4"> {{dec($valorBaixa)}}</div>
    <div class="w-1/3 px-2 bg-gray-200">env('lctoAcertoMais')</div> 
    <div class="w-1/3 text-center bg-gray-200">&ensp;&ensp;&ensp;&nbsp;{{$mais}}</div>
    <div class="w-1/3 text-right text-red-500 bg-gray-200">{{dec($valorMais)}}</div>
    <div class="w-1/3 px-2 ">env('lctoAcertoMenos')</div>
    <div class="w-1/3 text-center ml-4">{{$menos}}</div>
    <div class="w-1/3 text-right text-red-500 -ml-4">{{dec($valorMenos)}}</div>
    <div class="w-1/2 px-2 bg-gray-200">env('diaAcerto')</div>
    <div class="w-1/2 bg-gray-200">{{dbr($diaAcerto)}}</div>
</div>