title: CSS for ride booking screen
body: <p>How do I recreate the following effect in CSS?</p>
  
  <p><a href="https://i.stack.imgur.com/HyRyG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HyRyG.png" alt="enter image description here"></a></p>
  
  <p>This is my attempt so far: <a href="https://jsfiddle.net/cLqatpzf/" rel="nofollow noreferrer">https://jsfiddle.net/cLqatpzf/</a>.</p>
  
  <p>I've tried to base it on: <a href="https://www.uber.com/en-GB/fare-estimate/" rel="nofollow noreferrer">https://www.uber.com/en-GB/fare-estimate/</a>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div class="soft-tiny palm-push--sides bg-primary-layer-color pointer-events--all" data-reactid="381"&gt;
      &lt;div class="bg-primary-layer-color pointer-events--all" data-reactid="382"&gt;
        &lt;div class="position--relative" data-reactid="383"&gt;
          &lt;div class="fare-estimate__input-connector z-10" data-reactid="384"&gt;&lt;/div&gt;
          &lt;div class="fare-estimate__pickup push-tiny--bottom" data-reactid="385"&gt;
            &lt;div class="autocomplete-container" data-reactid="386"&gt;
              &lt;div class="autocomplete position--relative" data-reactid="387"&gt;
                &lt;div class="autocomplete__input hard flush--bottom autocomplete__input--icon" data-reactid="388"&gt;
                  &lt;div data-reactid="389"&gt;&lt;input value="" placeholder="Enter pickup location" autocomplete="off"
                      aria-label="Enter a pickup location: address, city and state required" data-reactid="390"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;&lt;svg viewBox="0 0 64 64" width="16px" height="16px" class="_style_2ZI4zP _style_4wJp4e" tabindex="0"
              role="button" aria-label="Locate me" data-reactid="391"&gt;
              &lt;path d="M28.0355206,31.9992104H7.978334L54.3777542,8.2149429c0.1557846-0.081008,0.3967628-0.2157388,0.6570473-0.2157388 c0.4893532,0,0.993042,0.4245925,0.993042,0.9369226c0,0.1713877-0.0173073,0.3512955-0.1097603,0.5290899L32.0355339,55.9992104 l-0.0000114-20C32.0355225,33.7900696,30.2446594,31.9992104,28.0355206,31.9992104z"
                data-reactid="392"&gt;&lt;/path&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
          &lt;div class="_style_4nVh08 fare-estimate__destination-row" data-reactid="393"&gt;
            &lt;div class="_style_VxPAE fare-estimate__destination" data-reactid="394"&gt;
              &lt;div class="autocomplete-container" data-reactid="395"&gt;
                &lt;div class="autocomplete position--relative" data-reactid="396"&gt;
                  &lt;div class="autocomplete__input hard flush--bottom autocomplete__input--icon" data-reactid="397"&gt;
                    &lt;div data-reactid="398"&gt;&lt;input value="" placeholder="Enter destination" autocomplete="off" aria-label="Enter a destination: address, city and state required"
                        data-reactid="399"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;&lt;button style="line-height:0px;padding:13px;" tabindex="-1" class="_style_1PoMFk _style_16HNh4"
              aria-label="Request estimate" kind="primary" disabled="" data-reactid="400"&gt;&lt;svg viewBox="0 0 64 64" width="16px"
                height="16px" class=" _style_26XEsq" data-reactid="401"&gt;
                &lt;path fill-rule="evenodd" clip-rule="evenodd" d="M59.9270592,31.9847012L60,32.061058L43.7665291,49.1333275l-3.2469215-3.5932007 L51.3236885,34H4v-4h47.3943481L40.5196075,18.4069672l3.2469215-3.4938126L60,31.946312L59.9270592,31.9847012z"
                  data-reactid="402"&gt;&lt;/path&gt;
              &lt;/svg&gt;&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ion-toolbar {
    color: #919191;
  }
  
  .bg-primary-layer-color {
    background-color: #FFF!important;
  }
  
  .fare-estimate__input-connector {
    position: absolute;
    top: 23px;
    bottom: 21px;
    left: 15.5px;
    width: 1px;
    background-color: #C6C6C6;
  }
  
  .fare-estimate__input-connector:before {
    bottom: -1.5px;
    background-color: #F32F00;
    border: 1px solid #F32F00;
  }
  
  .push-tiny--bottom, .push-tiny--ends {
    margin-bottom: 12px!important;
  }
  
  .autocomplete-container {
    width: 100%;
  }
  
  .position--relative {
    position: relative!important;
  }
  
  .autocomplete__input {
    height: 44px;
    width: 100%;
    border: 1px solid #E5E5E4;
  }
  
  .fare-estimator {
    width: 440px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 71px);
    padding: 24px 24px 0;
  }
  
  .autocomplete div input {
    width: 100%;
    border: 0;
    padding: 0 16px 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  </code></pre>