I am currently working on aligning the label tag, text, and submit input types to the left side of the page, while also ensuring that the 17 total orders are aligned to the right. The goal is to have them vertically aligned with the Date label and horizontally aligned with the end of the paragraph tag that reads "Shipping List is Finalized Everyday at 5pm EST".
My progress so far includes successfully aligning the label tag and two input tags as desired. However, I am encountering difficulty in getting the span tag to align completely to the right side. This project is being developed using bootstrap 4.1.1.
Below is a snippet of my code:
.main {
margin: 15px 0;
}
.btn-appear {
color: #000000;
background-color: #e6e6e6;
border: 3px solid #b3b3b3;
}
.btn-appear:focus {
box-shadow: 0 0 0 .1em rgba(186, 208, 226, .5);
}
.btn-appear:active {
color: #ffffff;
background-color: #4d4d4d;
border-color: #bad0e2;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row main" style="background-color: #ffffff">
<div class="col-12">
<h3>Shipping / Loading List</h3>
<div class="">
<p class="float-left">Select Shipping / Loading Date</p>
<p class="float-right">Shipping List is Finalized Everyday at 5pm EST.</p>
</div>
<div class="row container justify-content-between">
<div class="col-4 row" style="background-color: antiquewhite">
<form method="post">
<div class="form-group">
<label class="control-label d-block" for="date">Date:</label>
<div class="form-inline d-inline-block">
<input class="form-control" id="date" name="date" size="10" placeholder="MM/DD/YYYY" type="text" />
<input class="btn btn-appear" name="submit" type="submit" value="Search">
</div>
</div>
</form>
</div>
<span class="col-4 text-right" style="background-color: aliceblue">
17 Total Orders for <span id="demo"></span>
</span>
</div>
</div>
</div>