title: how to add button inside input in joomla
body: <p><a href="https://i.stack.imgur.com/ey1eA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ey1eA.png" alt="enter image description here"></a></p>
  
  <p>This is how my input and button looks like. The CSS code looks like this:</p>
  
  <pre><code>button._searchfrontpage 
  {
  
  margin: 0 auto;
      background: #333;
          height: 53px;
          width: 70px;
          border-radius: 6px;
          line-height: normal;
          color: #eee;    
          font-weight: 400;
          letter-spacing: 2px;
          border: 0px;
          display: block;
          font-size: 18px;
  
  
  }
  
   .sp-module_searchfrontpage input[type="text"] {
  
  
          background: #f0dbc5;
          height: 53px;
          width: 50%;
          margin: 0 auto;
          border-radius: 6px;
          margin-bottom: 40px;
          line-height: normal;
          color: #444;    
          font-weight: 400;
          letter-spacing: 2px;
          border: 0px;
          display: block;
  
  
  }
  </code></pre>
  
  <p>I dont seem to figure out a way to drag the grey button into the right side of my input box. Are there someone who can figure me an idea to work from? </p>
  
  <p>EDIT: after implementing the code @Jai gave me, it looks fine, but when i make the browser smaller, it gets out of its place and looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/3zpEe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3zpEe.png" alt="enter image description here"></a></p>
  
  <p>Obviously its like that, because the input width is 50%. are there any solutions for that?</p>