title: Weird vertical line appearing between divs
body: <p>I'm having some issues with an input I'm working on. It's a text input with an inline submit button. I added an SVG to the background of the button to give it the appearance of being cut out in a triangle (see image). </p>
  
  <pre><code>&lt;div class="input-block animated fadeIn"&gt;
      &lt;span class="sub"&gt;Have a 5-digit code? Enter it here.&lt;/span&gt;
      &lt;div id="code-input" class="ui action massive input"&gt;
          &lt;input type="text" placeholder="X3FMN" maxlength="5"&gt;
              &lt;button id="code-submit" class="ui icon button"&gt;
                  &lt;i class="mdi mdi-arrow-right"&gt;&lt;/i&gt;
              &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/qEH2O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qEH2O.png" alt="picture of input"></a></p>
  
  <p>However, as you can see, there's a strange vertical line that's showing up. In web inspector, it appears that the line is contained in the input element and not the button element. I've tried tinkering with the CSS borders and outlines and forcing them off, but I've had no luck.</p>
  
  <p>The line in question seems to be caused by this CSS rule:</p>
  
  <pre><code>.ui.action.input:not([class*="left action"]) &gt; .button:last-child,    
  .ui.action.input:not([class*="left action"]) &gt; .buttons:last-child &gt; 
  .button, .ui.action.input:not([class*="left action"]) &gt; .dropdown:last-child {
      border-radius: 0px 0.285714rem 0.285714rem 0px;
  }
  </code></pre>
  
  <p>If it's deactivated, the line disappears, but so do the rounded corners at the right end of that element.</p>
  
  <p>The site can be viewed at <a href="http://healthdollars.com" rel="nofollow noreferrer">healthdollars.com</a> (still in development).</p>
  
  <p><strong>UPDATE:</strong> It seems that the line appears in Chrome all the time and in Safari only when the input loses focus (both on OS X).</p>