title: Place dollar symbol inside a text input
body: <p>I want to keep dollar symbol at beginning of text box. I am able to achieve this using the below code.</p>
  
  <p>It works find in chrome and IE. The dollar symbol goes and sits next to label in firefox. How do i fix this problem? And for aligning the dollar symbol inline with text i use top 2px. Is there a way to better the css code.</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-css lang-css prettyprint-override"><code>.input-symbol-dollar:after {
    color: #37424a !important;
    content: "$";
    font-size: 16px !important;
    font-weight: 400;
    left: 10px;
    position: absolute;
    top: 2px;
  }
  
  .input-symbol-dollar {
    position: relative;
  }
  
  .abc-input {
    border: 2px solid #c9c9c9;
    box-shadow: none;
    color: #6b6f72;
    font-size: 0.9375rem;
    text-transform: none;
    width: 100%;
    color: #37424a !important;
    font-family: "Roboto Regular", sans-serif;
    font-size: 16px !important;
    font-weight: 400;
    height: 42px !important;
    padding-left: 17px !important;
    display: inline-block !important;
  }
  
  label {
    color: #37424a;
    display: inline-block;
    font-family: "Roboto Bold", sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label for="abcInput" class="abc-label"&gt;lable filed &lt;/label&gt;
  &lt;span class="input-symbol-dollar"&gt;
  &lt;input  type="text" id="abcInput" tabindex="0" name="abc" class="abc-input "  placeholder="0.00"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/8jdek3zt/5/" rel="nofollow noreferrer">https://jsfiddle.net/8jdek3zt/5/</a></p>