p element stuck to divs?

This is a super weird problem. Probably caused by something stupid in my HTML or CSS. I’m learning javascript currently, and I’m making a super simple webpage that demonstrates the dragging ability of javascript. I have two divs, one that floats left and one right, and a p element that should be below the divs. The problem is, I can’t separate them. The border of the p element extends into the divs for some reason. I’ve tried messing with the height of the p element, but then the border isn’t even around the text—it’s in the divs. I’ve also tried separating them with margin-top on the p element and that brings the divs down with it. So the elements seem stuck together and I truly don’t know why. Here is my code:

  var dropzone = document.getElementById("dropzone");
  var dropzone2 = document.getElementById("dropzone2");
  var text = document.getElementById("text");

  var dragging = null;
  var wheredrop = null;

  function dragover(e){
      wheredrop = e.target;

  function dragend(e){
      wheredrop = null;
      dragging = null;

  function drag(e){
      dragging = e.target;

  text.ondragstart = drag;
  text.ondragend = dragend;
  dropzone.ondragenter = dragover;
  dropzone2.ondragenter = dragover;
  document.body.ondragenter = dragover;
<!DOCTYPE html>
        <title>Test Drag</title>
        <div id="dropzone" style="border: 1px solid black; width: 49.85%; height: 300px; float: left; margin-top: -50px;"></div>
        <div id="dropzone2" style="border: 1px solid green; width: 49.85%; height: 300px; float: right; margin-top: -50px;"></div>
        <p id="text" draggable="true" style="border: 1px solid pink; margin-top: 150px;">This is text to drag.</p>


You can add a property into your styles display:inline-block .I think it will solve both your issue it will be below div and the border of p would only take the size of the text