I'm currently working with an HTML layout that features a two-column structure. The code snippet below highlights this setup:
<div class="card-body">
<div class="row">
<div class="col-md-10">
<form id="bookform">
<div class="row">
<div class="col">
<label for="datefrom" class="form-label">Date From</label>
<input id="datefrom" name="datafrom" type="text">
</div>
<div class="col">
<label for="dateto" class="form-label">Date To</label>
<input id="dateto" name="dateto" type="text">
</div>
<div class="col-2">
<label for="bookname" class="form-label">Book Name</label>
<input id="bookname" name="bookname" type="text">
</div>
<div class="col-2">
<label for="batchno" class="form-label">Batch No</label>
<input id="batchno" name="batchno" type="text">
</div>
</div>
<div class="row">
<div class="col">
<label for="address" class="form-label">Address</label>
<input id="address" name="address" type="text">
</div>
</div>
</form>
</div>
<div class="col-md-auto">
<div class="row">
<button class="btn btn-outline-success">Excel Export</button>
</div>
</div>
</div>
</div>
Displayed output can be viewed https://i.sstatic.net/dnEp8.png. My challenge is aligning the button to the bottom of the textboxes. Can you provide guidance on how to achieve this alignment?