title: Place question mark submit button inside input field
body: <p>I have an input field and a submit button which looks like a question mark due to css styling. This is what it currently looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/FeOMQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FeOMQ.png" alt="enter image description here"></a></p>
  
  <p>How can I position the question mark inside the input field like this:</p>
  
  <p><a href="https://i.stack.imgur.com/7UOj6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7UOj6.png" alt="enter image description here"></a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="div"&gt;
    &lt;form method="post"&gt;
      &lt;input type="text" class="input"&gt;
      &lt;input type="submit" value="?" class="submit"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.div {
    position: relative;
    top: 50%;
    transform: translateY(50%);
  }
  
  .input {
    display: block;
    margin: 0 auto;
    width: 50%;
  }
  
  .submit {
    background: none;
    border: none;
  }
  </code></pre>
  
  <p>JsFiddle: <a href="https://jsfiddle.net/TheCodesee/8h72tjcL/2/" rel="nofollow noreferrer">https://jsfiddle.net/TheCodesee/8h72tjcL/2/</a></p>