title: reactjs autosuggest suggestion list detached from input
body: <p>I created an autosuggest usting react-autosuggest, now I'm trying do design the layout. I took a css from an <a href="https://codepen.io/ciaranm87/pen/rLNGaJ" rel="nofollow noreferrer">example</a> which seems to work fine.</p>
  
  <p>when I copied this css to my project the suggestion list completely detached from the input of the autosuggest as shown in the image below:</p>
  
  <p><a href="https://i.stack.imgur.com/kKtgc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kKtgc.png" alt="detached list from input"></a></p>
  
  <p>I also tried to move the div in the example but the list follows the input (as it should)</p>
  
  <p>here is the css from codepen which I tried to use:</p>
  
  <pre><code>.react-autosuggest__container {
    position: relative;
  }
  
  .react-autosuggest__input {
    width: 240px;
    height: 30px;
    padding: 10px 20px;
    font-family: Helvetica, sans-serif;
    font-weight: 300;
    font-size: 16px;
    border: 1px solid #aaa;
    border-radius: 4px;
  }
  
  .react-autosuggest__input:focus {
    outline: none;
  }
  
  .react-autosuggest__container--open .react-autosuggest__input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  .react-autosuggest__suggestions-container {
    position: absolute;
    top: 51px;
    width: 280px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    border: 1px solid #aaa;
    background-color: #fff;
    font-family: Helvetica, sans-serif;
    font-weight: 300;
    font-size: 16px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 2;
  }
  
  .react-autosuggest__suggestion {
    cursor: pointer;
    padding: 10px 20px;
  }
  
  .react-autosuggest__suggestion--focused {
    background-color: #ddd;
  }
  </code></pre>