I have a Bootstrap page displaying a title along with 2 forms in a single row positioned above a table. The 2nd form, located at the top left above the table, is currently occupying the full width of the parent column (col-md-8) when it only needs to occupy about half of the column's width.
I am struggling to figure out how to adjust the positioning of this form so that it takes up less space while still aligning with the left side of the title and table. To see how it currently appears, use the full page option as it is designed for desktop viewing only.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Items List</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<form class="form-horizontal" id="findItems" action="#" method="get" role="form">
<input type="hidden" name="action" value="findItems">
<table class="table table-bordered">
<tr>
<td><input type="text" class="form-control" name="itemID" id="itemID" placeholder="Shipment ID"></td>
<td><input type="text" class="form-control datepicker" name="shippingDate" id="shippingDate" data-date-format="dd/mm/yyyy" placeholder="Date Shipped"></td>
<td class="text-center">
<button type="submit" class="btn btn-success">Update All</button>
</td>
</tr>
</table>
</form>
</div>
<!-- /.col-md-8-->
<div class="col-md-4">
<div>
<form class="form-horizontal" id="findMoreItems" action="#" method="get" role="form">
<input type="hidden" name="action" value="findMoreItems">
<table class="table table-bordered">
<tr>
<td>Shipment ID:</td>
<td><input type="text" class="form-control" name="shipmentID" id="shipmentID" placeholder="Shipment ID"></td>
</tr>
<tr>
<td>Authority ID:</td>
<td><input type="text" class="form-control" name="authorityID" id="authorityID" placeholder="Authority ID"></td>
</tr>
<tr>
<td>Ref ID:</td>
<td><input type="text" class="form-control" name="refID" id="refID" placeholder="Ref ID"></td>
</tr>
<tr>
<td>Serial Number:</td>
<td><input type="text" class="form-control" name="serialNumber" id="serialNumber" placeholder="Serial #"></td>
</tr>
<tr>
<td colspan="2" class="text-center">
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-success">Search</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<!-- /.col-md-4-->
</div>
<!-- /.row-->
<br>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th class="text-center" scope="col">Shipment ID</th>
<th class="text-center" scope="col">Item ID</th>
<th class="text-center" scope="col">Serial Number</th>
<th class="text-center" scope="col">Shipped Date</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div><!-- /.container -->