正确设计带有段落和搜索元素的间隔样式

Question

jsfiddle - http://jsfiddle.net/gt7Z7/

我引用的网站 - http://www.lingulo.com/tutorial-content/html5/

我走了浮动路线，但它破坏了父容器的布局，并且我用边缘修补了但是我无法掌握如何自己做这个。

我如何设计它以便它可以与lingulo示例类似地显示？

HTML

<div id="mainsearch">
  <div id="mscontainer">
    <div id="ms1">
      <p>Text here to mid-page
    </div>
    <div id="ms2">
      <input type="search">
    </div>
  </div>
</div>

CSS

#mainsearch {
  background-color: grey;
  width: 100%;
}

#mscontainer {
  width: 90%;
  margin: 0 auto;
}

#ms1 {
  width: 55%;
}

#ms1 p {
  font-family: 'Oswald', sans-serif;
  font-size: 230%;
  text-align: left;
  display: inline;
}

#ms2 {
  float: right;
  margin: -2.5em 0 0 0;
  width: 50px;
}