Html 为什么这两个元素不在一行中对齐？

我试图将这些输入表单对齐到一行。如果我把它们分开，它会起作用。只是想让它有反应。我希望他们在一行的桌面和移动一个低于另一个。 我使用这些样式来创建表单，以使表单具有响应性，并且它们单独工作。但是，当我添加我的页面的其他样式时，会出现冲突，并且不再工作

/** basic default styles **/
    html { margin: 0; padding: 0; }







    span.chyron { font-size: 1.2em; padding-top: 10px; }

    /** main blocks **/
    #container {
        display: block;
        max-width: 800px;
        margin: 0 auto;
        margin-top: 5px;
        margin-bottom: 66px;
        padding: 20px 15px;
        background: #fff;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    td {
        width: 60%;
    }


    /** the form elements **/
    #hongkiat-form { box-sizing: border-box; }

    #hongkiat-form .txtinput {
        display: block;
        font-family: "Helvetica Neue", Arial, sans-serif;
        border-style: solid;
        border-width: 1px;
        border-color: #dedede;
        margin-bottom: 20px;
        font-size: 1.55em;
        padding: 11px 25px;
        padding-left: 55px;
        width: 90%;
        color: #777;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
        -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
        -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
        -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    }

    #hongkiat-form .txtinput:focus {
        color: #333;
        border-color: rgba(41, 92, 161, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
        outline: 0 none;
    }

    #hongkiat-form input#name {
        background: #fff url('images/user.png') 5px 4px no-repeat;
    }
    #hongkiat-form input#email {
        background: #fff url('images/email.png') 5px 4px no-repeat;
    }
    #hongkiat-form input#website {
        background: #fff url('images/website.png') 5px 4px no-repeat;
    }
    #hongkiat-form input#telephone {
        background: #fff url('images/phone.png') 5px 4px no-repeat;
    }

    #hongkiat-form textarea {
        display: block;
        font-family: "Helvetica Neue", Arial, sans-serif;
        border-style: solid;
        border-width: 1px;
        border-color: #dedede;
        margin-bottom: 15px;
        font-size: 1.5em;
        padding: 11px 25px;
        padding-left: 55px;
        width: 90%;
        height: 180px;
        color: #777;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
        -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
        -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
        -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    }
    #hongkiat-form textarea:focus {
        color: #333;
        border-color: rgba(41, 92, 161, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
        outline: 0 none;
    }


    #hongkiat-form #slider { width: 70%; }

    #hongkiat-form #aligned {
        box-sizing: border-box;
        float: left;
        width: 300px;
        margin-right: 50px;
    }
    #hongkiat-form #aside {
        float: left;
        width: 400px;
        padding: 0;
        box-sizing: border-box;
    }

    #wrapping { width: 100%; box-sizing: border-box; }

    span.radiobadge { display: block; margin-bottom: 8px; }
    span.radiobadge label { font-size: 1.2em; padding-bottom: 4px; }





    /** @group clearfix **/
    .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
    .clearfix { display: inline-block; }

    html[xmlns] .clearfix { display: block; }
    * html .clearfix { height: 1%; }

下面是一个JSFIDLE：

谢谢大家!

用flexbox试试：

<div class="container">
  <div class="form1 flex-item">
  form
  </div>
  <div class="form2 flex-item">
  form2
  </div>
</div>

---

你需要在你的问题中贴一个。如果你看你贴的小提琴，你会发现你的HTMl非常混乱。例如，除非在TD中，否则您不能在一个表中创建另一个表。最简单的版本有效：我强烈建议使用网格，它会让您的生活更加舒适。@MoshFeu如果这不是问题，为什么要使用框架（或其一部分）？谢谢您的回答，Eva，但它不起作用。工作原理与非工作版本相同。以下是我所做的：

.container{
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.flex-item{
  width: 50%;

  @media (max-width: 600px){
   width: 100%;
  }
}