Почему эти два элемента не выровнены в одной строке?

Question

Я пытаюсь выровнять эти формы ввода в одну строку. Если я возьму их отдельно - это сработает. Просто пытаюсь сделать его отзывчивым. Я хочу, чтобы они были в одной строке для рабочего стола и перемещали одну под другую для мобильных устройств. Я использую эти стили для создания форм реагирования, и они работают отдельно. Но когда я добавить другие стили моей страницы есть конфликт, и он больше не работает

/** 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%; } 

Вот jsfiddle для него:

jsFiddle

Спасибо!

Answer 1

попробовать с Flexbox:

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

CSS:

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

.flex-item{ 
    width: 50%; 

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