title: How to put the list horizontally starting next to a different elem (input elem for example)
body: <p>I was trying to &quot;clone code&quot; a GitHub website, and I am stuck on how to put the list horizontally. <a href="https://i.stack.imgur.com/xWyJY.png" rel="nofollow noreferrer">(as seen here)</a></p>
  <p>Here is my CSS code :</p>
  <pre class="lang-css prettyprint-override"><code>#section1{
    background-color: black;
    height: 7%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    float: left;
  }
  
  #logo1{
    position: relative;
    left: 2%;
    top: 13px;
    margin-right: 60px;
  }
  
  #searchBar{
    height: 20px; 
    width: 250px;
    border-radius: 5px;
    background-color: transparent;
    border-width: 3px;
    border-color: rgb(180,180,180);
    padding: 7px;
  }
  
  input[id^=&quot;searchBar&quot;]::placeholder {
    color: rgb(220,220,220)
  }
  </code></pre>
  <p>And here is my HTML code :</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;Title&gt;&lt;/Title&gt;
        &lt;link rel = &quot;stylesheet&quot; href = &quot;clone1.css&quot;&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;section id = &quot;section1&quot;&gt;
           &lt;a href = &quot;https://github.com/&quot;&gt;
              &lt;img id = &quot;logo1&quot; src = &quot;img/logo1.png&quot;&gt;
           &lt;/a&gt;
           &lt;input id = &quot;searchBar&quot; type = &quot;text&quot; placeholder=&quot;search or jump to...&quot;&gt;
           &lt;span&gt;Pull&lt;/span&gt;
              &lt;ul&gt;
                 &lt;li&gt;Pull requests&lt;/li&gt;
              &lt;/ul&gt;
        &lt;/section&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I was expecting the list starting next to the search bar because the section1 has the CSS code &quot;float: left&quot;.<br />
  Could anyone tell me how I can layout the list horizontally starting next to the search bar?</p>