如何合并HTML输入框（订阅框）和具有响应功能的按钮？（附图片样本）

我是新的网页设计，我试图创建模板，这是给我的任务…我想创建一个订阅按钮输入文本框。我放了一些截图和我的文件代码。请帮我解决

   <section style="background-color: #ea6153">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                        <div class="subscribe-content-text">
                            <h4>IF YOU WANT DAILY UPDATE OF OUR PRODUCT THEN JOIN AND SUBSCRIBE OUR NEWS LETTER</h4>
                        </div>
                    </div>

                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                    <div class="input-group subscribe-form">
                        <input type="text" class="form-control input-lg" id="input-form" placeholder="Your Email here">
                        <span><button class="btn subscribe-btn" type="button">SUBSCRIBE</button></span>
                    </div>
                </div>
              </div>
            </div>
        <section>


    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

如果您想了解我们产品的每日更新，请加入并订阅我们的新闻信函
订阅
这是我的CSS文件：
.订阅内容文本
{
字号：18px；
字体大小：粗体；
字体系列：Roboto，衬线；
颜色：#ffffff；
文本对齐：左对齐；
边缘顶部：75px；
边缘底部：70像素；
}
.订阅表格
{
利润上限：64px；
}
#输入表格
{
边框：1px纯白；
边界半径：0px；
背景色：#ea6153；
颜色：#ffffff；
}
输入[type=“text”]
{
颜色：#ffffff；
}
输入：：-webkit输入占位符
{
颜色：#ffffff！重要；
字体大小：14px！重要；
字体系列：Roboto，Serif！重要；
}
输入：：-moz占位符
{
颜色：#ffffff！重要；
字体大小：14px！重要；
字体系列：Roboto，Serif！重要；
}
.订阅btn
{
位置：绝对位置；
背景色：#ffffff；
颜色：#ea6153；
字体：24px粗体；
字体系列：Roboto，衬线；
字体大小：粗体；
边框样式：无；
边界半径：继承；
}
[我需要在html中创建的此屏幕截图][1]
[这个截图是我用html制作的**强文本**][2]
[1]: https://i.stack.imgur.com/B3qze.png
[2]: https://i.stack.imgur.com/AGvfr.png

使用下面的链接或代码，它可能会对您有所帮助

HTML代码-

<section style="background-color: #ea6153">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
        <div class="subscribe-content-text">
          <h4>IF YOU WANT DAILY UPDATE OF OUR PRODUCT THEN JOIN AND SUBSCRIBE OUR NEWS LETTER</h4>
        </div>
      </div>

      <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
        <div class="form-group subscribe-form">
          <input type="text" class="form-control input-lg" id="input-form" placeholder="Your Email here">
          <button class="btn subscribe-btn" type="button">SUBSCRIBE</button>
        </div>
      </div>
    </div>
  </div>
  <section>

/*
通过html-Form-guide.com联系表单
您可以在此样式表中自定义表单的所有方面
所有样式元素都使用表单id选择器（注意#contactus）。那么包括这个,
样式表根本不影响其他元素！
*/
#contactus字段集
{
边框：0px实心#ccc；
-moz边界半径：10px；
-webkit边界半径：10px；
-khtml边界半径：10px；
边界半径：10px；
}
#contactus legend，h2
{
字体系列：Arial，无衬线；
字号：1em；
字体大小：粗体；
颜色：#333；
}
#contactus标签
{
字体系列：Arial，无衬线；
字号：0.8em；
字体大小：粗体；
}
#contactus输入[type=“text”]，textarea
{
字体系列：Arial，Verdana，无衬线；
字号：0.8em；
线高：140%；
颜色：#000；
填充：3倍；
边框：1px实心#999；
-moz边界半径：5px；
-webkit边界半径：5px；
-khtml边界半径：5px；
边界半径：5px；
}
#contactus输入[type=“text”]
{
高度：18px；
宽度：120px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
#contactus#scaptcha
{
宽度：60px；
高度：18px；
}
#contactus输入[type=“submit”]
{
宽度：100px；
高度：30px；
左侧填充：0px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
#接触文本区
{
高度：120px；
宽度：110px；
-webkit边界半径：8px；
-moz边界半径：8px；
边界半径：8px；
}
#contactus输入[type=“text”]：焦点，文本区域：焦点
{
颜色：#009；
边框：1px实心#990000；
背景色：#ffff99；
字体大小：粗体；
}
#contactus.Container
{ 
}
#联系我们。错误
{
字体系列：Verdana、Arial、无衬线字体；
字体大小：0.7em；
颜色：#900；
背景色：#ffff00；
}
#contactus fieldset#反垃圾邮件
{
填充：2px；
边框顶部：1px实心#EEE；
左边框：0；
右边界：0；
边界底部：0；
}
#contactus fieldset#反垃圾邮件图例
{
字体系列：Arial，无衬线；
字号：0.8em；
字体大小：粗体；
颜色：#333；
}
#联系我们，简短的解释
{
字体系列：Arial，无衬线；
字号：0.6em；
颜色：#FFF；
}
/*垃圾邮件陷阱：此输入是隐藏的。这是用来欺骗垃圾邮件机器人的*/
#联系人：spmhidip
{
显示：无；
宽度：10px；
高度：3倍；
}
#fg_crdiv
{
字体系列：Arial，无衬线；
字体大小：0.3em；
不透明度：.2；
-moz不透明度：.2；
过滤器：α（不透明度=20）；
}
#fg_crdiv p
{
显示：无；
}

这是我的荣幸：）@meetshah虽然这个代码片段可能是解决方案，但确实有助于提高您的文章质量。请记住，您将在将来为读者回答这个问题，而这些人可能不知道您的代码建议的原因。这对我来说一直很有效。如果你对此有任何疑问，请告诉我。

.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;
  position: relative;
}

#input-form {
  border: 1px solid white;
  border-radius: 0px;
  background-color: #ea6153;
  color: #ffffff;
  position:relative;
  padding: 0px 30% 0px 10px;
}

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;
  position: absolute;
  right: 5px;
  top:3px;
}