How to keep a paragraph height even when there is no text in it?

Question

The problem is that I have two skinny boxes as in the code below. Both of them have a child paragraph. The first paragraph has some text in it, the second one does not. Again, the problem is that when text is gone any paragraph loses its height, I wanna keep that somehow.

I wanna keep the height of the second paragraph as if there was one line of text (the font-size is defined), how can I do that using CSS ?

.drunk-container {
   display: flex;
}

.skinny-box {
  height: 70px;
  width: 300px;
  outline: 1px solid blue;
  
  padding: 10px;
  box-sizing: border-box;
}

p {
  font-size: 1.2rem;
  color: green;
  outline: 1px solid red;
}

<div class="drunk-container">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>

Answer 1

Add an empty element inside when it's empty. Works with any font-size

.drunk-container {
   display: flex;
  font-size: 1.2rem;
}

.skinny-box {
  width: 300px;
  outline: 1px solid blue;
  
  padding: 10px;
  box-sizing: border-box;
}

p {
  color: green;
  outline: 1px solid red;
}

p:empty::before {
  content:"";
  display:inline-block;
}

<div class="drunk-container">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>

<div class="drunk-container" style="font-size:2rem;">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>

Or like below that would support all the cases (even multi line)

.drunk-container {
   display: flex;
  font-size: 1.2rem;
}

.skinny-box {
  width: 300px;
  outline: 1px solid blue;
  display:flex; /* here */
  padding: 10px;
  box-sizing: border-box;
}

p {
  color: green;
  flex-grow:1; /* and here */
  outline: 1px solid red;
}

<div class="drunk-container">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>

<div class="drunk-container" style="font-size:2rem;">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>

<div class="drunk-container" style="font-size:2rem;">

  <div class="skinny-box">
    <p>Some<br> text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>

Answer 2

There are a lot of ways of doing this, I would add a min-height to the <p> like so:

p {
    min-height: 22px;
}

.drunk-container {
   display: flex;
}

.skinny-box {
  height: 70px;
  width: 300px;
  outline: 1px solid blue;
  
  padding: 10px;
  box-sizing: border-box;
}

p {
  font-size: 1.2rem;
  color: green;
  min-height: 22px;
  outline: 1px solid red;
}

<div class="drunk-container">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>

---

To support multi-line <p> I would suggest some JS:

const p1 = document.getElementById('p1');
const p2 = document.getElementById('p2');
p2.style.minHeight = p1.clientHeight + 'px';

.drunk-container {
   display: flex;
}

.skinny-box {
  height: 150px;
  width: 300px;
  outline: 1px solid blue;
  
  padding: 10px;
  box-sizing: border-box;
}

p {
  font-size: 1.2rem;
  color: green;
  outline: 1px solid red;
}

<div class="drunk-container">

  <div class="skinny-box">
    <p id='p1'>Some<br>mutliline<br>text</p>
  </div>

  <div class="skinny-box">
    <p id='p2'></p>
  </div>
  
</div>

Answer 3

Can you please check the below code? Hope it will work for you. You have to add min-height: calc(100% - 30px); to p tag and this 30px value is depend upon total margin of p tag.

Please refer to this link: https://jsfiddle.net/yudizsolutions/qax3egj5/2/

.drunk-container {
   display: flex;
}

.skinny-box {
  height: 70px;
  width: 300px;
  outline: 1px solid blue;
  
  padding: 10px;
  box-sizing: border-box;
}

p {
  font-size: 1.2rem;
  color: green;
  outline: 1px solid red;
  margin: 15px 0;
  min-height: calc(100% - 30px);
}

<div class="drunk-container">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>

Answer 4

You could simply define a minimum height to your paragraph on the css level like this min-height: 21px; check out the code below and let me know if it helps.

.drunk-container {
   display: flex;
}

.skinny-box {
  height: 70px;
  width: 300px;
  outline: 1px solid blue;
  
  padding: 10px;
  box-sizing: border-box;
}

p {
  font-size: 1.2rem;
  color: green;
  outline: 1px solid red;
  min-height: 21px;
}

<div class="drunk-container">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>

Answer 5

How about just adding some dummy "placeholder" text to the second para and making its colour the same as that of your background.

.drunk-container {
   display: flex;
}

.skinny-box {
  height: 70px;
  width: 300px;
  outline: 1px solid blue;
  
  padding: 10px;
  box-sizing: border-box;
}

p {
  font-size: 1.2rem;
  color: green;
  outline: 1px solid red;
}

<div class="drunk-container">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p style="color: white;">!</p>
  </div>
  
</div>