I want to create a small square colour filled box in HTML & CSS. And most important - I want to write one line after the box

Question

i have created colored squre box using code

.box {
  height: 20px;
  width: 20px;
  margin-bottom: 15px;
  border: 1px solid black;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

<div class='box red'></div>= Super Fast Trains<br>
<div class='box green'></div>= Mail/Express Trains<br>
<div class='box blue'></div>= Local/ Passenger Trains

But I want the text beside the boxes which is not showing in this current code.I also tried 'float:left' attribute but that making the second & third lines not showing in same margin. See the code at https://jsfiddle.net/14to4gej/
So please help me with correct modification in my code to get text after boxes an in same margin. Thanks in advance.

Answer 1

Try next:

.box {
  float: left;
  height: 20px;
  width: 20px;
  margin-bottom: 15px;
  border: 1px solid black;
  clear: both;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

<div><div class='box red'></div>= Super Fast Trains</div>
<br>
<div><div class='box green'></div>= Mail/Express Trains</div>
<br>
<div><div class='box blue'></div>= Local/ Passenger Trains</div>

Answer 2

How about using the square html entity?

<div style="color:blue">&#9632;</div>