html - Properly styling a spacer with paragraph and search elements in it -

jsfiddle -

वह साइट जिसे मैं बंद कर रहा हूं -

मैं फ्लोटिंग मार्ग चला गया, लेकिन यह पैरेंट कंटेनर के लेआउट को बर्बाद कर दिया और मैंने मार्जिन के साथ tinkered लेकिन मैं यह समझ नहीं पा रहा हूं कि यह कैसे करना मेरे दम पर करना है।

मैं इसे स्टाइल करने के बारे में कैसे जाना होगा ताकि यह भाषा के उदाहरण के समान प्रदर्शित हो सके?

HTML

  & lt; div id = "mainsearch" & gt; & Lt; div id = "mscontainer" & gt; & Lt; div id = "ms1" & gt; & Lt; p & gt; यहां मध्य पृष्ठ पर पाठ & lt; / div & gt; & Lt; div id = "ms2" ​​& gt; & Lt; इनपुट प्रकार = "खोज" & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt;  

सीएसएस

  #mainsearch {पृष्ठभूमि रंग: ग्रे; चौड़ाई: 100%; } # एमएमएस कंटेनर {चौड़ाई: 90%; मार्जिन: 0 ऑटो; } # एमएस 1 {चौड़ाई: 55%; } # एमएस 1 पी {फ़ॉन्ट-परिवार: 'ओसवाल्ड', बिना-सेरिफ़; फ़ॉन्ट-आकार: 230%; पाठ संरेखित करें: बायां; प्रदर्शन: इनलाइन; } # एमएस 2 {फ्लोट: सही; मार्जिन: -2.5 मी 0 0 0; चौड़ाई: 50px; }