jQuery / css使两个div显示在同一行上

Question

鉴于我有以下html标记：

<div class="container">
  <div id="divOne">One div</div>
  <div id="divTwo">
    <span id="spanTwo">
      <label>Input two:</label>
    <input type="text" id="inputTwo" />
    </span>
  </div>  
  <div id="divthree">
    <p>
      <label>selectOne</label>
      <span id="spanSelectOne">
        <select id="selectOne">
          <option value="opt1">Opt1</option>
          <option value="opt2">Opt2</option>       
        </select>
      </span>
      <span id="spanSelectTwo">
        <select id="selectOne">
          <option value="opt01">Opt01</option>
          <option value="opt02">Opt02</option>
        </select>
      </span>      
    </p>
  </div>
</div>

如何让div id =“divTwo”并且div id =“divthree”出现在同一行？第一个 divthree 然后 divTwo ，使用jQuery还是css？

更新：

我无法在html代码中添加div或其他元素，它就像那样渲染，我只能用js或css来改变它。

Answer 1

更改显示属性以使其显示为内联。

#divTwo, #divthree {
    display: inline-block;
}

Answer 2

#divTwo, #divthree {
    display: inline-block !important;
}

Answer 3

我更新了我的答案。 我使用jQuery来追加新的div

＆＃13;

＆＃13;

var $newdiv1 = $( "<div class='selectInput'></div>"),
  existingdiv2 = document.getElementById( "divTwo" ),
  existingdiv3 = document.getElementById( "divthree" );
 
$( ".container" ).append( $newdiv1);
$( ".selectInput" ).append( [ existingdiv3, existingdiv2 ] );

＆＃13;

.selectInput{
  display: flex;
}

#divthree{
  margin-right: 20px;
}

#divTwo{
  margin: auto 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="divOne">One div</div>
  <div id="divTwo">
    <span id="spanTwo">
      <label>Input two:</label>
    <input type="text" id="inputTwo" />
    </span>
  </div>  
  <div id="divthree">
    <p>
      <label>selectOne</label>
      <span id="spanSelectOne">
        <select id="selectOne">
          <option value="opt1">Opt1</option>
          <option value="opt2">Opt2</option>       
        </select>
      </span>
      <span id="spanSelectTwo">
        <select id="selectOne">
          <option value="opt01">Opt01</option>
          <option value="opt02">Opt02</option>
        </select>
      </span>      
    </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

JS Fiddle link for this code