Need to align elements inside a div to be on the same line

Question

I have a div on my page that contains unordered list and another div with a textbox in it. Currently they are displayed one on top of anther but I need to display them side by side. How can I accomplish that? I need to do that without changing html, only with CSS

.t-Breadcrumb {
  list-style: none;
  border: solid 2px green;
  width: 50%;
}

.custom_search {
  border: solid 2px red;
  width: 50%;
  align: right;
}

<div class="t-BreadcrumbRegion-breadcrumb">

  <ul class="t-Breadcrumb">
    <li class="t-Breadcrumb-item"><a href="#" class="t-Breadcrumb-label">Parent Page</a></li>
    <li class="t-Breadcrumb-item is-active">
      <h1 class="t-Breadcrumb-label">Child Page</h1>
    </li>
  </ul>
  <div id="R112223" class="t-Form--search  t-Form--xlarge">
    <div class="custom_search">

      <label for="P3_SEARCH" id="P3_SEARCH_LABEL" class="t-Form-label u-VisuallyHidden">Search</label>
      <input type="text" />
    </div>

  </div>

score 0 · Accepted Answer · answered Sep 13 '18 at 15:39

one method is to use float: left

.t-Breadcrumb {
  list-style: none;
  border: solid 2px green;
  width: 50%;
  float: left;
  margin: 0;
}

.custom_search {
  border: solid 2px red;
  width: 50%;
  align: right;
}
.t-Form--search {
  float: left;
}

<div class="t-BreadcrumbRegion-breadcrumb">

  <ul class="t-Breadcrumb">
    <li class="t-Breadcrumb-item"><a href="#" class="t-Breadcrumb-label">Parent Page</a></li>
    <li class="t-Breadcrumb-item is-active">
      <h1 class="t-Breadcrumb-label">Child Page</h1>
    </li>
  </ul>
  <div id="R112223" class="t-Form--search  t-Form--xlarge">
    <div class="custom_search">

      <label for="P3_SEARCH" id="P3_SEARCH_LABEL" class="t-Form-label u-VisuallyHidden">Search</label>
      <input type="text" />
    </div>

  </div>

Need to align elements inside a div to be on the same line

1 Answers1