title: How to merge HTML input box(Subscribe box) and a button with responsive? (sample images attached)
body: <p>I am new to web designing and i m trying to create template which is task given to me ...i want to create a subscribe input textbox with button. i put some screenshot and code of my file.please help me to resolve     </p>
  
  <pre><code>   &lt;section style="background-color: #ea6153"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-6 col-lg-6 col-sm-12 col-xs-12"&gt;
                          &lt;div class="subscribe-content-text"&gt;
                              &lt;h4&gt;IF YOU WANT DAILY UPDATE OF OUR PRODUCT THEN JOIN AND SUBSCRIBE OUR NEWS LETTER&lt;/h4&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;div class="col-md-6 col-lg-6 col-sm-12 col-xs-12"&gt;
                      &lt;div class="input-group subscribe-form"&gt;
                          &lt;input type="text" class="form-control input-lg" id="input-form" placeholder="Your Email here"&gt;
                          &lt;span&gt;&lt;button class="btn subscribe-btn" type="button"&gt;SUBSCRIBE&lt;/button&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;section&gt;
  
  
      This is my CSS file:
  
  
      .subscribe-content-text
      {
          font-size: 18px;
          font-weight: bold;
          font-family: Roboto, Serif;
          color: #ffffff;
          text-align: left;
          margin-top: 75px;
          margin-bottom:70px;
      }
      .subscribe-form
      {
          margin-top: 64px;
      }
      #input-form
      {
          border: 1px solid white;
          border-radius: 0px;
          background-color: #ea6153;
          color: #ffffff;
  
      }
      input[type="text"]
      {
          color: #ffffff;
  
      }
      input::-webkit-input-placeholder
      {
          color:#ffffff !important;
          font-size: 14px !important;
          font-family: Roboto, Serif !important;
      }
      input::-moz-placeholder
      {
          color: #ffffff !important;
          font-size: 14px !important;
          font-family: Roboto, Serif !important;
      }
  
      .subscribe-btn
      {
         position: absolute;
         background-color: #ffffff;
         color: #ea6153;
         font: 24px bold;
         font-family: Roboto, Serif;
         font-weight: bold;
         border-style: none;
         border-radius: inherit;
      }
      [This screenshot which i need to create in html responsive][1]
  
  
      [This screenshot which i made in html**strong text**][2]
  
  
        [1]: https://i.stack.imgur.com/B3qze.png
        [2]: https://i.stack.imgur.com/AGvfr.png
  </code></pre>