Create horizontally aligned divs in another div

I want to create some html. In a div, which has a grey border, there开发者_开发知识库 should be two divs horizontally aligned. There should be a separating line between them.

<div style="width:400px; border-color:#D3D3D3; border-style:solid; border-width:1px;">
<div runat="server" id="plDiv" style="width:300px;">
    one
</div>
<div style="border-left:1px; border-left-style:solid; border-left-color:#D3D3D3; width:100px;">
    other
</div>

I excluded all my tries to use float because it just doesn´t do what I want. Can anyone help?

See the answer I just posted here a few moments ago:

Wrappers size reflecting its contents

This does exactly what you're asking.

Basically there are 2 divs inside a container and a dividing line between the two:

You can see this demonstrated here in this fiddle: http://jsfiddle.net/kWJ79/15/

<div style="width: 400px; border: 1px solid #D3D3D3;; overflow: hidden;">
  <div id="plDiv" style="width: 300px; float: left;" runat="server"> one </div>
  <div style="border-left: 1px solid #D3D3D3; width: 99px; float: left;"> other </div>
</div>

When the second div has a width of 99px (to take into account the border I assume) then the floats seem to work fine.