I've tried adjusting here and there endlessly, but still. I'm sure this is not the right approach as Bootstrap seems to offer practicality for this purpose, but I can't find the right approach and I'd appreciate a little help:
.parent {
font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.col-form-label {
font-size: 0.85rem;
margim-right: -25px;
}
.form-group input,
select {
font-size: 0.85rem;
padding-left: 03px;
padding-right: 03px;
}
.form-group {
margin-bottom: 2px !important;
}
.custom-select {
padding-left: 0.15rem !important;
font-size: 0.85rem;
}
select:focus {
outline-width: 0px;
box-shadow: 0 0 5pt 2pt #D3D3D3;
}
select {
border: solid 1px #D3D3D3;
width: 300px;
height: 33px;
scroll-behavior: smooth;
border-radius: 0.2rem;
font-size: 12px;
}<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<div class="col">
<form id="headerForm">
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label id="orderPoLabel" for="order_po" class="col-7 col-form-label">Pedido de Venta:</label>
<div class="col-4 pr-0">
<select id="selectOrderPo" name="order_po" required="required" class="custom-select">
<option value=""></option>
</select>
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="fabricPo" class="col-7 col-form-label">Pedido de Produción:</label>
<div class="col-4 pr-0">
<input id="fabricPo" name="fabricPo" type="text" required="required" value="" class="form-control" disabled="">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="poDate" class="col-7 col-form-label">Fecha:</label>
<div class="col-4 pr-0">
<input id="poDate" name="poDate" type="date" required="required" class="form-control" placeholder="dd-mm-yyyy" onchange="orderDate1('Production');generateShipDate(getLeadTime(), 'Production')">
<input id="npoDate" name="poDate" type="text" required="required" class="form-control" placeholder="dd-mm-yyyy" onclick="orderDate()" hidden="">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="leadTime" class="col-7 col-form-label">Plazo de Entrega:</label>
<div class="col-4 pr-0">
<input id="leadTime" name="leadTime" type="number" class="form-control" onchange="generateShipDate(this, 'Production')" min="0" max="180">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="text3" class="col-7 col-form-label">Fecha de Envío:</label>
<div class="col-4 pr-0">
<input id="shipDate" name="shipDate" type="text" class="form-control" disabled="">
</div>
</div>
</form>
</div>