How set two divs on the sides of the page?

Question

I have a problem with setting elements in a div. How can I set to display the number of elements on the page on the left and the search on the right

Here is a part of the code:

<div class="header-size-section">
    <div class="lable-size-section">
        <select class="form-control size-list" id="table-size-list" name="table-size-list" onchange="tableSizeChanged(this)">
            <option>25</option>
            <option>50</option>
            <option>100</option>
            <option>all</option>
        </select>
    </div>
    <div class="header-search-section">
        <span class="table-search-list">Search: </span>
        <input type="text" class="search-table" />
    </div>
</div>

Here is the JSFiddle

Answer 1

You can just do this and remove the rest of the css:

.header-size-section {
  display: flex;
  font-weight: 600;
}

.lable-size-section {
  margin-right: 25px;
}

.search-table {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

Answer 2

Notice the: .header-size-section(change display: flex to display: block) and .header-size-section>.header-search-section(you missed dots)

.bootstrap-table .table:not(.table-condensed),
.bootstrap-table .table:not(.table-condensed)>tbody>tr>th,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>th,
.bootstrap-table .table:not(.table-condensed)>thead>tr>td,
.bootstrap-table .table:not(.table-condensed)>tbody>tr>td,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>td {
  padding: 2px 3px 2px 3px;
}

.header-size-section {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

.size-list {
  padding-bottom: 1px;
  padding-top: 1px;
}

.table-search-list {
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  padding: 6px;
}

.search-table {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.header-search-section,
.lable-size-section {
  display: inline-table;
}

.header-size-section>.header-search-section {
  float: right;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="header-size-section justify-content-between">
  <div class="lable-size-section">
    <select class="form-control size-list" id="table-size-list" name="table-size-list" onchange="tableSizeChanged(this)">
            <option>25</option>
            <option>50</option>
            <option>100</option>
            <option>all</option>
        </select>
  </div>
  <div class="header-search-section">
    <span class="table-search-list">Search: </span>
    <input type="text" class="search-table" />
  </div>
</div>

Answer 3

You are using bootstrap. Use bootstrap class justify-content-between. This ensures that the elements within that block have equivalent space between them.

Now, as there are only two element, you get complete space in center.

You can also use justify-content-around.

.bootstrap-table .table:not(.table-condensed),
.bootstrap-table .table:not(.table-condensed)>tbody>tr>th,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>th,
.bootstrap-table .table:not(.table-condensed)>thead>tr>td,
.bootstrap-table .table:not(.table-condensed)>tbody>tr>td,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>td {
  padding: 2px 3px 2px 3px;
}

.header-size-section {
  display: flex;
  font-weight: 600;
  margin-bottom: 2px;
}

.size-list {
  padding-bottom: 1px;
  padding-top: 1px;
}

.table-search-list {
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  padding: 6px;
}

.search-table {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.header-search-section,
.lable-size-section {
  display: inline-table;
}

header-size-section>header-search-section {
  float: right;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="header-size-section justify-content-between">
  <div class="lable-size-section">
    <select class="form-control size-list" id="table-size-list" name="table-size-list" onchange="tableSizeChanged(this)">
            <option>25</option>
            <option>50</option>
            <option>100</option>
            <option>all</option>
        </select>
  </div>
  <div class="header-search-section">
    <span class="table-search-list">Search: </span>
    <input type="text" class="search-table" />
  </div>
</div>

This is an example with justify-content-around.

.bootstrap-table .table:not(.table-condensed),
.bootstrap-table .table:not(.table-condensed)>tbody>tr>th,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>th,
.bootstrap-table .table:not(.table-condensed)>thead>tr>td,
.bootstrap-table .table:not(.table-condensed)>tbody>tr>td,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>td {
  padding: 2px 3px 2px 3px;
}

.header-size-section {
  display: flex;
  font-weight: 600;
  margin-bottom: 2px;
}

.size-list {
  padding-bottom: 1px;
  padding-top: 1px;
}

.table-search-list {
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  padding: 6px;
}

.search-table {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.header-search-section,
.lable-size-section {
  display: inline-table;
}

header-size-section>header-search-section {
  float: right;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="header-size-section justify-content-around">
  <div class="lable-size-section">
    <select class="form-control size-list" id="table-size-list" name="table-size-list" onchange="tableSizeChanged(this)">
            <option>25</option>
            <option>50</option>
            <option>100</option>
            <option>all</option>
        </select>
  </div>
  <div class="header-search-section">
    <span class="table-search-list">Search: </span>
    <input type="text" class="search-table" />
  </div>
</div>