How to move div to the right side of the screen - html

Question

I am trying to put my 2nd div on the right side of the page.
So apparently the 2nd div should be on the right side of the 1st div . At the moment is right under the 1st div and i want to put it on the right side of the first div and should remain responsive
I am trying to put my 2nd div on the right side of the page.
So apparently the 2nd div should be on the right side of the 1st div . At the moment is right under the 1st div and i want to put it on the right side of the first div and should remain responsive
How can i get this done with css.
<div class="container col-md-12 col-md-offset-0">
<div class="well well bs-component">
<form class="form-horizontal" method="post">
{!! csrf_field() !!}
<--1st div -->
<div class="form-group">
<label for="name" class="col-lg-1 control-label">Phone</label>
<div class="col-lg-8">
<input type="text" class="typeahead form-control" id="phone" placeholder=" Customer Phone Number" name="phone" required>
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-1 control-label"> Name</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="name" placeholder=" Customer Name" name="name" required>
</div>
</div>
<--End of 1st div -->
<--2nd div -->
<div class="panel">
<div class="panel_1">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
</table>
</div>
</div>
<--End of 2nd div -->
<--3rd div -->
<div class="row">
<div class="col-md-9">
<div class="nav-tabs-custom" id="tabs">
<ul class="nav nav-tabs">
#foreach($countries as $country)
<li><a href="#tab_{{ $country->id }}" data-toggle="tab" >{!!$category->name!!}</a></li>
#endforeach
</ul>
<div class="tab-content">
#foreach($countries as $key => $country)
<div class="tab-pane" id="tab_{{ $country->id }}">
<table class="table" id="tables">
<thead>
<tr>
<th></th>
<th colspan="5"></th>
<th></th>
</tr>
</thead>
<tbody id="food_list">
#foreach($country->teams as $team)
<tr>
</tr>
#endforeach
</tbody>
</table>
</div>
#endforeach
</div>
</div>
</div>
</div>
<--End of 3rd div -->
</form>
</div>
</div>

Answer 1

<div class="container col-md-12 col-md-offset-0">
<div class="well well bs-component">
<form class="form-horizontal" method="post">
{!! csrf_field() !!}
<!--1st div --><div class="col-xs-12 col-sm-6">
<div class="form-group">
<label for="name" class="col-lg-1 control-label">Phone</label>
<div class="col-lg-8">
<input type="text" class="typeahead form-control" id="phone" placeholder=" Customer Phone Number" name="phone" required>
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-1 control-label"> Name</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="name" placeholder=" Customer Name" name="name" required>
</div>
</div></div>
<!--End of 1st div -->
<!--2nd div --><div class="col-xs-12 col-sm-6">
<div class="panel">
<div class="panel_1">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
</table>
</div>
</div></div>
<!--End of 2nd div -->
<!--3rd div -->
<div class="row">
<div class="col-md-9">
<div class="nav-tabs-custom" id="tabs">
<ul class="nav nav-tabs">
#foreach($countries as $country)
<li><a href="#tab_{{ $country->id }}" data-toggle="tab" >{!!$category->name!!}</a></li>
#endforeach
</ul>
<div class="tab-content">
#foreach($countries as $key => $country)
<div class="tab-pane" id="tab_{{ $country->id }}">
<table class="table" id="tables">
<thead>
<tr>
<th></th>
<th colspan="5"></th>
<th></th>
</tr>
</thead>
<tbody id="food_list">
#foreach($country->teams as $team)
<tr>
</tr>
#endforeach
</tbody>
</table>
</div>
#endforeach
</div>
</div>
</div>
</div>
<!--End of 3rd div -->
</form>
</div>
</div>

Answer 2

Few changes that you have to make:
You have used col-md in some rows while for others you have used col-lg..? Either give each of your columns all size support by mentioning col-lg, col-md, col-sm like I have changed below.
The columns which you need on the same row need to be wrapped inside one class="row" in bootstrap. That's why I have made two columns with size col-8 and col-4 for your first and second div and wrapped them in row instead of the forms.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container col-lg-12 col-md-12 col-sm-12 col-12 col-lg-offset-0 col-md-offset-0 col-sm-offset-0 col-offset-0">
<div class="well well bs-component">
<form class="form-horizontal" method="post">
{!! csrf_field() !!}
<!--1st div -->
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-8">
<div class="form-group">
<label for="name" class="col-lg-1 col-md-1 col-sm-1 col-1 control-label">Phone</label>
<div class="">
<input type="text" class="typeahead form-control" id="phone" placeholder=" Customer Phone Number" name="phone" required>
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-1 col-md-1 col-sm-1 col-1 control-label"> Name</label>
<div class="">
<input type="text" class="form-control" id="name" placeholder=" Customer Name" name="name" required>
</div>
</div>
</div>
<!--End of 1st div -->
<!--2nd div -->
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="panel">
<div class="panel_1">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<!--End of 2nd div -->
<!--3rd div -->
<div class="row">
<div class="col-md-9 col-sm-9 col-lg-9 col-9">
<div class="nav-tabs-custom" id="tabs">
<ul class="nav nav-tabs">
#foreach($countries as $country)
<li>{!!$category->name!!}</li>
#endforeach
</ul>
<div class="tab-content">
#foreach($countries as $key => $country)
<div class="tab-pane" id="tab_{{ $country->id }}">
<table class="table" id="tables">
<thead>
<tr>
<th></th>
<th colspan="5"></th>
<th></th>
</tr>
</thead>
<tbody id="food_list">
#foreach($country->teams as $team)
<tr>
</tr>
#endforeach
</tbody>
</table>
</div>
#endforeach
</div>
</div>
</div>
</div>
<!--End of 3rd div -->
</form>
</div>
</div>