How to display letters on new line in css - html

Question

I have four divs which shows a number, I want to display the words below those numbers. I have tried using the p tag with white-space: pre; in css, but still it does not work:
#c {
padding-top: 30px;
padding-bottom: 30px;
}
.cnum {
background: black;
border-radius: 5px;
color: #fff;
padding: 15px;
margin: 5px;
font-size: 20px;
}
p {
white-space: pre;
}
<div id="c">
<span class='cnum'>27 Text1</span><span class='cnum'>10 Text2</span><span class='cnum'>40 Text 3</span><span class='cnum'>5 Text 4</span>
</div>

Answer 1

HTML
<div id="c">
<div class='cnum'>27 <br/>Text1</div>
<div class='cnum'>10 <br/>Text2</div>
<div class='cnum'>40 <br/>Text 3</div>
<div class='cnum'>5 <br/>Text 4</div>
</div>
CSS
#c{
padding-top:30px;
padding-bottom:30px;
}
.cnum{
background: black;
border-radius: 5px;
color: #fff;
padding: 15px;
margin:5px;
font-size:20px;
max-Width :100px;
float :left
}
Heres a CodePen

Answer 2

If you can't edit the HTML, here's a workaround using word-spacing. Obviously this method is very limited...
#c {
padding-top: 30px;
padding-bottom: 30px;
}
.cnum {
background: black;
border-radius: 5px;
color: #fff;
padding: 15px;
margin: 5px;
font-size: 20px;
display: inline-block;
width: 100px;
word-spacing: 100px;
}
<div id="c">
<span class='cnum'>27 Text1</span><span class='cnum'>10 Text2</span><span class='cnum'>40 Text3</span><span class='cnum'>5 Text4</span>
</div>

Answer 3

I just separated the elements according to the hierarchy so that I could then apply the style. If you observe keep the span tags, but you could replace them with a block element.
I recommend you to learn about inline and block HTML elements and how to convert them in each other.
I hope I have contributed.
#c {
padding-top: 30px;
padding-bottom: 30px;
}
.cnum {
background: black;
border-radius: 5px;
color: #fff;
padding: 15px;
margin: 5px;
font-size: 20px;
display: inline-block;
text-align: center;
}
.cnum span{
display: block;
}
p {
white-space: pre;
}
<div id="c">
<div class="cnum">
<span>27</span>
<span>Text 1</span>
</div>
<div class="cnum">
<span>10</span>
<span>Text 2</span>
</div>
<div class="cnum">
<span>40</span>
<span>Text 3</span>
</div>
<div class="cnum">
<span>5</span>
<span>Text 4</span>
</div>
</div>

Answer 4

If you can edit the html you can do the following, additionally using the pseudo selector ::first-line style the numbers differently
#c {
padding-top: 30px;
padding-bottom: 30px;
}
.cnum {
background: black;
border-radius: 5px;
color: #fff;
padding: 15px;
margin: 5px;
font-size: 20px;
}
.cnum::first-line {
font-size: 30px;
color: yellow;
}
<div id="c">
<div class='cnum'>27 <br/>Text1</div>
<div class='cnum'>10 <br/>Text2</div>
<div class='cnum'>40 <br/>Text 3</div>
<div class='cnum'>5 <br/>Text 4</div>
</div>