इनलाइन-ब्लॉक div में पाठ

Question

को दबाकर मैंने आज सुबह एक अजीब सीएसएस समस्या की खोज की और मुझे आशा है कि सीएसएस विशेषज्ञ मेरी मदद कर सकते हैं। this demo में, लाल div में पाठ इसे धक्का क्यों दे रहा है? मुझे उम्मीद थी कि दो divs एक दूसरे के बगल में होंगे। धन्यवाद!
संपादित करें: उत्तर के लिए धन्यवाद दोस्तों। मैं थोड़ी देर में एक जवाब स्वीकार करूंगा। क्या कोई यह समझा सकता है कि यह क्यों हो रहा है?

Answer 1

...........................

हाय अब vertical-align: top;

के लिए इस्तेमाल किया

div { 
    display: inline-block; 
    height: 50px; 
    width: 50px; 
    vertical-align: top; 
} 

Demo

Answer 2

float:left जोड़ना इस मुद्दे को हल करता है।

Working sample