Div followed by Para in the same line - css

Question

Code
<div style="width:10px;height:10px;border:1px solid #F00;background:red;"></div>
<p>Red</p>
<div style="width:10px;height:10px;border:1px solid #00F;background:blue;"></div>
<p>Blue</p>
In the above code I expect two square box followed by the color name in different line. But it gives the box in one line and the para in
another line. How to achieve this in the same line like
[] Red
[] Blue

Answer 1

For a quick fix just add this to your CSS:
p,div{
display: inline-block;
}
This way will change properties of all your div and p elements.
Usually you would assaign classes to elements so you can target them from one place and only target them.

Answer 2

Try the following solution:
div {
display:inline-block;
width:10px;
height:10px;
border:1px solid #F00;
margin-right:5px;
}
p {
display:inline;
}
p:after {
content:"\A";
white-space:pre;
}
<div style="background:red;"></div><p>Red</p>
<div style="background:blue;"></div><p>Blue</p>
Hint: I would wrap these items to avoid overwriting the CSS of other <p> and <div> items, like the following:
.legend div {
display:inline-block;
width:10px;
height:10px;
border:1px solid #F00;
margin-right:5px;
}
.legend p {
display:inline;
}
.legend p:after {
content:"\A";
white-space:pre;
}
<div class="legend">
<div style="background:red;"></div><p>Red</p>
<div style="background:blue;"></div><p>Blue</p>
</div>
<div>line #1 (with div).</div>
<p>line #2 (with p).</p>

Answer 3

you can achieve this in so many ways, here is one:
inline-block
div {
width: 10px;
height: 10px;
border: 1px solid #F00;
}
div:first-of-type {
background: red
}
div:nth-of-type(2) {
background: blue
}
div,
p {
display: inline-block
}
<div></div>
<p>Red</p>
<div></div>
<p>Blue</p>
using span (which is an inline element)
div {
width: 10px;
height: 10px;
border: 1px solid #F00;
}
div:first-of-type {
background: red
}
div:nth-of-type(2) {
background: blue
}
div {
display: inline-block
}
<div></div>
<span>Red</span>
<div></div>
<span>Blue</span>
using pseudo-element ::before
span {
position: relative;
padding-left:15px
}
span::before {
width: 10px;
height: 10px;
border: 1px solid #F00;
content: '';
position: absolute;
left: 0;
top:3px
}
span:first-of-type::before {
background: red
}
span:nth-of-type(2)::before {
background: blue
}
<span>Red</span>
<span>Blue</span>