Paragraphs in two-column layout have different top heights - html

Question

I have this two inline block text side by side but one them has one more paragraph and it mess up the text.
As you can see the "who we are" paragraph has weird height and i want to be potion same as "what we do" paragraph so it looks like this
This is my code
#wrapper {
width: 100%;
border: 1px solid blue;
text-align: left;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
display: inline-block;
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
<div id="content">
<h1>Who We Are</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
</div>
what do i need to do. i think there is already an topic for this but i don't know whats its called because English is not my first language.

Answer 1

Add the vertical align property to your #content element in your CSS code:
#content{
width:25%;
margin-left:15%;
font-size:16px;
display: inline-block;
vertical-align: top;
}

Answer 2

#wrapper {
width: 100%;
border: 1px solid blue;
text-align: left;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
display: inline-block;
vertical-align: top; /* <-------------------- your huckleberry */
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
<div id="content">
<h1>Who We Are</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
</div>

Answer 3

There are two solutions:
Solution One (Add vertical-align: top; in content class):
#content{
width:25%;
margin-left:15%;
font-size:16px;
display: inline-block;
vertical-align: top;
}
Second Solution:
Add inline css in first content div
<div id="content" style="float:left;">

Answer 4

A simple solution for this would be the following:
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
float:left;
}
You do not need to define width:100% for #wrapper, div is a block level element. You also don't need text-align:left; since text-align:left is the default rule for all element unless an upper level has a different align rule. display:inline-blocks is treated as a table cell, which by default has its value as "baseline", you can read from here http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Also, you should not be putting <p> inside of <span>, <span> is an inline block element and <p> is a block level element; Here is what I would do, it's simple and works and it is not based on hacks.
You may be more interested in the quick fix but its important to know the rules because hacks eventually collapse.
Hope this helps.
#wrapper {
border: 1px solid blue;
}
#wrapper:after {
content: '';
display:block;
clear:both;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
float:left;
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<div>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</div>
</div>
<div id="content">
<h1>Who We Are</h1>
<div>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</div>
</div>
</div>