I am trying to make a resume webpage. I am using Bootstrap 4 to aide me with responsive design. I am struggling with spacing different collapsible (div) elements. 

I looked up some resources on w3schools. I saw that I can use HTML br tag to create a new line in a paragraph. However, that does not add a newline (space) between different elements. 

Here is my code 

```html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <p></p>
  <p>Some text here. </p>
</div>

</body>
</html>
```

Currently, I am using an empty p tag (see above) to add space between a collapsible element and the following element. However, is there any other way to add space? Or, is this method independent of the viewport/device?