I've tried playing around with the paddings, but it didn't solve the issue.
The idea is to stretch these fields from where they are all the way to the right.
Here's the Fiddle and this is how it looks VS what it should look like.
input[type='text'],
.txtarea {
margin-bottom: 3px;
}
.form-group input, select{
height: 36px;
padding-left: 03px;
padding-right: 03px;
}
.form-group {
margin-bottom: 2px !important;
}
.padding-0 {
padding-right: 0;
padding-left: 0;
}
label {
color: #292727;
font-weight: bold;
font-size: 13px;
width: 140px;
text-align: right;
}
label[for='notes'] {
font-size: 13px;
font-weight: bold;
text-align: left;
display: block;
}
.container-fluid {
max-width: 99%;
}<html>
<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="container-fluid px-5" id="container1">
<div class="row d-flex flex-wrap align-items-center">
<div class="col">
<img src=class="header__logo-img" alt="Some Hidden Logo" itemprop="logo" width="237" height="90">
</div>
<div id="unitSpot" style="display: none;">Fabric</div>
<div class="col">
<form id="headerForm">
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="select" class="col-4 col-form-label">Order:</label>
<div class="col-4">
<select id="selectOrderPo" name="select" required="required" class="custom-select" onchange="loadSuppliersForPoFromSS(this);resetPage()">
<option value="TTL-220218" selected="">TTL-2131231</option>
</select>
</div>
</div>
<div class="form-group row" style="display: flex;justify-content: flex-end;">
<label for="fabricPo" class="col-4 col-form-label">PO:</label>
<div class="col-4">
<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-4 col-form-label">PO Date:</label>
<div class="col-4">
<input id="poDate" name="poDate" type="date" required="required" class="form-control" placeholder="MM/dd/yyyy" onchange="generateShipDate(getLeadTime())">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="leadTime" class="col-4 col-form-label">Lead Time:</label>
<div class="col-4">
<input id="leadTime" name="leadTime" type="number" class="form-control" onchange="generateShipDate(this)" min="0" max="180">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="text3" class="col-4 col-form-label">Ship Date:</label>
<div class="col-4">
<input id="shipDate" name="shipDate" type="text" class="form-control" disabled="">
</div>
</div>
</form>
</div>
</div>
</div>
</html>