It is remarkable, it is rather valuable answer

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Factura Electrónica</title>
   
</head>
<body>
    <div class="container">
        <div class="title-section">
            <h1>Documento de Consulta operativo</h1>
        </div>
        <div class="title-section">
            <h4>Documento Tributario Electronico</h3>
        </div>
         <div class="title-section">
            <h5>FACTURA</h5>
        </div>
        <div class="main-section">
            <div class="left">
                <p class="info"><strong>Código de Generación:</strong> 123456789</p>
                <p class="info"><strong>Número de Control:</strong> ABCD1234</p>
            </div>
            <div class="center">
                <div class="qr">QR</div>
            </div>
            <div class="right">
                <p class="info"><strong>Modelo de Facturación:</strong> previo</p>
                <p class="info"><strong>Tipo de Transmisión:</strong> normal </p>
            </div>
        </div>
        <div class="emisor-receptor-container">
            <div class="emisor">
                <h3>Emisor</h3>
                <p><strong>Nombre:</strong> Empresa XYZ</p>
                <p><strong>NIT:</strong> 12345678-9</p>
                <p><strong>Dirección:</strong> Calle Principal, Ciudad</p>
                <p><strong>Teléfono:</strong> +502 1234-5678</p>
            </div>
            <div class="receptor">
                <h3>Receptor</h3>
                <p><strong>Nombre:</strong> Cliente ABC</p>
                <p><strong>NIT:</strong> 98765432-1</p>
                <p><strong>Dirección:</strong> Avenida Secundaria, Ciudad</p>
                <p><strong>Teléfono:</strong> +502 8765-4321</p>
            </div>
        </div>
         <div class="title-section">
           <h3>Venta a Cuentas de Terceros</h3>
        </div>
        <div class="venta-terceros-container">
            <p><strong>NIT:</strong> 12345678-9</p>
        </div>
         <div class="title-section">
           <h3>Documentos Relacionados</h3>
        </div>
       <div class="documentos-relacionados-container">
            <div class="cell">
                <h4></h4>
            </div>
        </div>

<div class="tabla-documentos">
            <div class="fila">
                <div class="columna">Nº</div>
                <div class="columna">Cantidad</div>
                <div class="columna">Unidad</div>
                <div class="columna">Descripción</div>
                <div class="columna">Precio Unitario</div>
                <div class="columna">Otros Montos No Afectos</div>
                <div class="columna">Descuento por Item</div>
                <div class="columna">Ventas No Sujetas</div>
                <div class="columna">Ventas Extensas</div>
                <div class="columna">Ventas Gravadas</div>
            </div>
            <div class="fila">
                <div class="columna">1</div>
                <div class="columna">1.00</div>
                <div class="columna">Otra</div>
                <div class="columna">PAGO DE INTERESES A PRESTAMO REF00000003</div>
                <div class="columna">0.58</div>
                <div class="columna">0.00</div>
                <div class="columna">0.00</div>
                <div class="columna">0.00</div>
                <div class="columna">0.58</div>
                <div class="columna">0.00</div>
            </div>
            <div class="fila">
                <div class="columna">2</div>
                <div class="columna">1.00</div>
                <div class="columna">Otra</div>
                <div class="columna">ABONO A CAPITAL REF00000003</div>
                <div class="columna">4.55</div>
                <div class="columna">0.00</div>
                <div class="columna">0.00</div>
                <div class="columna">0.00</div>
                <div class="columna">4.55</div>
                <div class="columna">0.00</div>
            </div>
         </div>

<div class="section-right">
    
    <div class="column-left">
        <div class="row">
            <span>Sumatoria de Ventas</span>
        </div>
        <div class="row">
            <span>Monto Global Desc., Rebajas y otros a Ventas No Sujetas</span>
        </div>
        <div class="row">
            <span>Monto Global Desc., Rebajas y otros a Ventas Exentas</span>
        </div>
        <div class="row">
            <span>Monto Global Desc., Rebajas y otros a Ventas Gravadas</span>
        </div>
        <div class="row">
            <span>Sub Total</span>
        </div>
        <div class="row">
            <span>IVA Retenido</span>
        </div>
        <div class="row">
            <span>Retención Renta</span>
        </div>
        <div class="row">
            <span>Monto Total de la Operación</span>
        </div>
        <div class="row">
            <span>Total Otros Montos No Afectos</span>
        </div>
        <div class="row">
            <span>Total a Pagar</span>
        </div>
    </div>
    
 
<div class="column-right">
    <div class="row">
        <span>$0.00</span>
    </div>
</div>

</div>

</div>
    
</body>
</html>

body {
         font-family: Arial, sans-serif;
         margin: 0;
         padding: 0;
         background-color: #f9f9f9;
     }

.container {
         width: 90%;
         max-width: 800px;
         margin: 20px auto;
         padding: 20px;
         background-color: #fff;
         border-radius: 8px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     }

.title-section {
         text-align: center;
         margin-bottom: 20px;
     }

.title-section h1 {
             font-size: 24px;
             font-weight: bold;
             color: #333;
         }

.main-section {
         display: flex; 
         flex-direction: row; 
         justify-content: space-between;
         align-items: center; 
         border-top: 1px solid #ddd;
         border-bottom: 1px solid #ddd;
         padding: 20px 0;
     }

.left, .right {
         flex: 1;
         font-size: 14px;
         color: #555;
     }

.center {
         flex: 1; 
         text-align: center;
     }

.qr {
         display: inline-block;
         width: 120px;
         height: 120px;
         background-color: #ccc;
         line-height: 120px;
         text-align: center;
         color: #555;
         font-size: 16px;
         border: 1px solid #ddd;
         border-radius: 4px;
     }

.info {
         margin: 5px 0;
     }

.info strong {
             color: #333;
         }

.emisor-receptor-container {
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
    align-items: flex-start; 
    padding: 20px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 20px 0;
}

.emisor, .receptor {
    flex: 1; 
    padding: 0 10px; 
    font-size: 14px;
    color: #555;
}

.emisor h3, .receptor h3 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.emisor p, .receptor p {
    margin: 5px 0;
    color: #555;
}

.venta-terceros-container {
    text-align: center;
    margin: 20px 0; 
    padding: 15px;
    border: 1px solid #ddd; 
    background-color: #f9f9f9; 
    border-radius: 5px; 
}

.venta-terceros-container h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px; 
}

.venta-terceros-container p {
    font-size: 14px;
    color: #555;
}

/* Contenedor para documentos relacionados */
.documentos-relacionados-container {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 5px;
    position: relative;
}

/* Línea horizontal */
.documentos-relacionados-container::before,
.documentos-relacionados-container::after {
    content: "";
    position: absolute;
    background-color: #ddd;
    border: 1px solid #ddd;
}

.documentos-relacionados-container::before {
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
}

.documentos-relacionados-container::after {
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
}

.documentos-relacionados-container .cell {
    display: inline-block;
    width: 50%;
    height: 50%;
    padding: 10px;
    box-sizing: border-box;
}

.documentos-relacionados-container h4 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.documentos-relacionados-container input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    color: #555;
}

.tabla-documentos {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.fila {
    display: flex;
    border: 1px solid #ddd;
}

.columna {
    flex: 1;
    padding: 8px;
    text-align: center;
    border-left: 1px solid #ddd;
}

.fila .columna:first-child {
    border-left: none;
}

.fila:nth-child(odd) {
    background-color: #f9f9f9;
}

.fila h4 {
    margin: 0;
    font-weight: normal;
}

.fila .columna {
    font-size: 14px;
}

.section-right {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    margin-right: 20px;
}

.column-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 20px; 
}

.column-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.row {
    display: flex;
    justify-content: space-between;
    width: 250px; 
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}

.row span {
    font-size: 14px;
}

.column-right .row {
    width: 250px; 
    padding: 8px 0;
}

Check out our Python playground!