Why is p tag pushing down parent div?

Question

I have two divs taking up half of the screen each. When I add a p tag inside the second div, it pulls it down. Why is this happening? I creating an html email so I have to use only inline styling and can't reference outside stylesheets with grid systems.

Here is an example: https://jsfiddle.net/jzcxhp2L/1/

<div>
  <div style="display: inline-block; width: 49%; height: 300px; border: 1px solid black;"></div>
  <div style="display: inline-block; width: 49%; height: 300px; border: 1px solid black;">
    <p>Lorem ipsum dolor</p>
  </div>
</div>

Answer 1

<p> is a block element and you're nesting it inside an inline element. That's not supposed to happen and is causing the layout issue. Block elements will create a new line.

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

This layout might work better for you. https://jsfiddle.net/jzcxhp2L/7/

<div style="display: flex; height: 300px; width: 95vw; margin:0 auto;">
  <div style="border: 1px solid black; height: 300px; flex:1;">
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
  </div>
  <div style="border: 1px solid black; height: 300px; flex:1;">
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    </div>
</div>