title: Put arrow or triangle on end of line
body: <p>I am trying to replicate this look of the lines with an arrow (or a triangle is fine) on end side of the Input form. This image is from a old flash app that is being converted to HTML5:
  <a href="https://i.stack.imgur.com/OCpif.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OCpif.jpg" alt="enter image description here"></a></p>
  
  <p>I have gotten as far as having the lines around the input field like this:</p>
  
  <p><a href="https://i.stack.imgur.com/XagvB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XagvB.jpg" alt="enter image description here"></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form action=""&gt;
      &lt;div class="line"&gt;
          &lt;label&gt;Cab Width = 
              &lt;input type="number" id="cabWidth" name="cabWidth" min="30" max="57.5" step="0.125" value="32" autofocus&gt; (decimal inches)
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.line {
    display: flex;
    flex: 1;
    width: 100%;
    margin: 20px auto;
    line-height: 1em;
  }
  .line:before, .line:after {
    content: '';
    flex-grow: 1;
    margin: 0px 4px;
    background: linear-gradient(black, black);
    background-size: 100% 2px;
    background-position: 0% 50%;
    background-repeat: repeat-x;
  }
  </code></pre>
  
  <p>But I cannot figure out how to add to the end of this a CSS triangle or arrow of some kind.  Maybe it can't be done.  </p>
  
  <p>Would appreciate any ideas or guidance on how I might solve this.</p>