JSFiddle - React, Tailwind, and code Playground

by ppgab

HTML

<div class="report-body" data-oid-index="0">
	<div class="pdfpreview-row border-bottom-0">
		Imagens com 2 colunas fixas
	</div>
    <div class="pdfpreview-row cols-2">
        <div class="pdfpreview-col">
        	<div class="text-center">
        		<img src="https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796_960_720.jpg">
        	</div>
        </div><div class="pdfpreview-col">
        	<div class="text-center">
        		Texto
        	</div>
        </div><div class="pdfpreview-col">
        	<div class="text-center">
        		<img src="https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796_960_720.jpg">
        		Imagem e texto
        	</div>
        </div>
    </div>
    <div class="pdfpreview-row cols-same-width">
        <div class="pdfpreview-col">Célula mesma linha 1</div>
        <div class="pdfpreview-col">Célula mesma linha 2</div>
        <div class="pdfpreview-col">Célula mesma linha 3</div>
        <div class="pdfpreview-col">Célula mesma linha 4</div>
        <div class="pdfpreview-col">Célula mesma linha 5</div>
        <div class="pdfpreview-col">Célula mesma linha 6</div>
    </div>
</div>

CSS

/* PdfPreview Structuring */
.pdfpreview-row{
    text-align:center;
    width: 100%;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    position: relative;
}
.pdfpreview-row:last-of-type{
    border-bottom: 1px solid black;
}
/* Rows border removal */
.pdfpreview-row.border-bottom-0{
    border-bottom : none;
}
.pdfpreview-row.border-bottom-0 + .pdfpreview-row{
    border-top : none;
}
/* Cols */
.pdfpreview-row > .pdfpreview-col {
    width: 100%;
    padding: 0.3cm;
    position: relative;
    box-sizing: border-box;
    vertical-align: middle;
}

.pdfpreview-row.cols-2 {
  text-align: left;
}

/* Row/Col based on parent */
.pdfpreview-row.cols-2 > .pdfpreview-col {
    width: 50%;
    display: inline-block;
}

/* Cols border removal */
.pdfpreview-row.border-inner-0 > .pdfpreview-col:not(:first-of-type) {
    border-left: none;
}
/* Images */
.pdfpreview-col img{
    width: 100%;
    max-height: 5cm;
}

/* Disable checkbox */
div.disable-checkbox-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    padding-right: .5rem;
    padding-top: .25rem;
    z-index: 1
}
.text-center {
  text-align: center;
}
/* Page margin */
@page {
    margin: 1cm;
}