Select dropdown option and label not coming in sameline - html

Question

I have a select dropdown box in html which is like below:
<div class="form-group col-md-6">
<label for="party_starter">Party Start Time</label>
<select id="party_starter" name="party_start_time" class="party_time" required="">
<option value="">Party Start Time</option>
<option value="Morning">Morning</option>
<option value="Highty">High Tea</option>
<option value="Dinner">Dinner</option>
</select>
</div>
below is complete code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div style="margin-top: 10%;"></div>
<div style="background-color: white;">
<div class="container">
<div style="background-color: #f5f5f5; border-radius: 10px;" class="table-responsive">
<table class="table ">
<tbody>
<tr>
<!--<th width="10%">Image</th>-->
<th width="20%">Name</th>
<th width="10%">Quantity</th>
<th width="10%">Price</th>
<th width="15%">Total</th>
<!--<th width="15%">Action</th>-->
</tr>
<tr>
<td>
<a target="_blank" href="http://btp.vasugroup.in/event-details/CAKES/5" style="color:red;"></a>
</td>
<td class="tdcls">
<input type="hidden" class="cart_qty24" name="cart_qty" value="1"> 1 </td>
<td><i class="fa fa-inr"> </i></td>
<td><i class="fa fa-inr"> 0</i></td>
</tr>
<tr>
<td colspan="3" align="right">Total</td>
<td><i class="fa fa-inr"> 0</i></td>
</tr>
</tbody>
</table>
</div>
<div style="margin-top: 1%;" class="row">
<div class="col-md-6">
<div style="background-color: #f5f5f5; border-radius: 10px;" class="col-md-12 border-1px">
<div class="billing-details">
<h3 class="mb-30">Customer Details</h3>
<div class="row">
<div class="form-group col-md-6">
<label for="checkuot-form-fname2">Phone No.</label>
<input id="checkuot-form-fname2" type="text" name="mobile_number" maxlength="10" class="form-control check-fill" max-length="10" value="" placeholder="Phone Number" required="">
</div>
<div class="form-group col-md-6">
<label for="checkuot-form-fname">Full Name</label>
<input id="checkuot-form-fname" name="customer_name" type="text" class="form-control check-fill" required="" placeholder="Full Name">
</div>
<div class="form-group col-md-6">
<label for="checkuot-form-lname">Email</label>
<input id="checkuot-form-lname" type="email" name="customer_email" required="" class="form-control check-fill" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label>Address</label>
<textarea class="form-control check-fill" required="" name="customer_address" placeholder="Add Your Complete Address" rows="3"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div style="background-color: #f5f5f5; border-radius: 10px;" class="col-md-12 border-1px">
<div class="billing-details">
<h3 class="mb-30">Event Details</h3>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="checkuot-form-fname">Event Title </label>
<input id="checkuot-form-fname" type="text" name="product_info" value="Birthday," class="form-control" readonly="">
</div>
<div class="form-group col-md-8">
<label for="checkuot-form-city">Event Location</label>
<input id="checkuot-form-city" type="text" required="" name="texLocation" class="form-control" placeholder="Event Location">
</div>
<div class="form-group col-md-4">
<label for="party_date">Party Date</label>
<input class="form-control party_date check-fill hasDatepicker" id="party_date" value="" type="date" required="" name="datPartyDate" placeholder="Party Date" autocomplete="off" aria-required="true" data-booked-dates="[""]">
</div>
<div class="form-group col-md-6">
<label for="party_starter">Party Start Time</label>
<select id="party_starter" name="party_start_time" class="party_time" required="">
<option value="">Party Start Time</option>
<option value="Morning">Morning</option>
<option value="Highty">High Tea</option>
<option value="Dinner">Dinner</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
the dropdown is working fine when its taken separate, but not with my complete code
the label and the select dropdown is not coming in the same line even after giving the for an attribute in a label. can anyone please tell me what is wrong in my code

Answer 1

The problem is with the class assigned to the div of Party Start Time. i.e col-md-6 which is of small width size to fit in both label and select in one line.
To fix it, use the below code:
<div class="form-group col-md-8">
<label for="party_starter">Party Start Time</label>
<select id="party_starter" name="party_start_time" class="party_time" required="">
<option value="">Party Start Time</option>
<option value="Morning">Morning</option>
<option value="Highty">High Tea</option>
<option value="Dinner">Dinner</option>
</select>
</div>

Answer 2

It is not coming in the same line because of the class You are using for the that contain both label and dropdown, so You can remove the class "col-md-6", and you can add style "width:auto" OR "display:inline-block"
<div class="form-group " style="display:inline-block">
.......
</div>
<div class="form-group " style="width:auto">