title: How to move close icon to the inside right side of the search bar?
body: <p>I'm making a wikipedia viewer. When you click the magnifying glass, it disappears and a search bar and close icon appear. </p>
  
  <p>How do I move the close/clear icon to the inside right side of the search bar?</p>
  
  <p><a href="https://codepen.io/jenlky/pen/WZBLEL" rel="nofollow noreferrer">https://codepen.io/jenlky/pen/WZBLEL</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    $(".fa-search").click(function(){
      $(".fa-search, form").toggle();
    });
    
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    height: 90%;
    background-color: #033350;
  }
  
  h1 {
    text-align: center;
    margin-top: 30px;
    color: white;
  }
  
  .container, .row {
    height: 90%;
  }
  
  .fa {
    display: inline-block;
    color: orange;
  }
  
  /* doesn't work for some reason... 
  a, .fa, a:focus {
    outline: none;
    border: none;
  }
  */
  
  a:hover {
    opacity: 0.6;
  }
  
  form {
    display: none;
  }
  
  .searchBar {
    border: 4px solid orange;
    border-radius: 20px;
    padding-left: 15px;
    height: 40px;
    background-color: #033350;
    color: white;
  }
  
  .ion-close-round {
    color: orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://use.fontawesome.com/e879f2bf45.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css"/&gt;
  &lt;link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/&gt;
  &lt;h1&gt;Wikipedia Viewer&lt;/h1&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row justify-content-center align-items-center"&gt;
      &lt;i class="fa fa-search fa-3x" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;form&gt;
          &lt;input type="search" class="searchBar" size="20px;" id="search" autocomplete="off" placeholder="Search Wikipedia"&gt;
          &lt;i class="icon ion-close-round"&gt;&lt;/i&gt;
      &lt;/form&gt;
      &lt;a class="btn" target="_blank" href="https://en.wikipedia.org/wiki/Special:Random"&gt;&lt;i class="fa fa-random fa-3x" title="Random article" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>