css: Rechteck mit Text daneben

[Jörg]

Hallo,

ich möchte 3 farbige Rechtecke mit jeweils erklärendem Text daneben darstellen.

Die 3 Rechtecke sind nicht so schwierig, aber mir machts Probleme den Text daneben zu schreiben.

<span class='r1'> </span> = Erklärtext 1
<span class='r2'> </span> = Erklärtext 2
<span class='r3'> </span> = Erklärtext 3

.r1
{
background-color:red;
  display: inline-block;
  border-width:1px;
  border-style:solid;
  border-color:#808080;
  padding:0.3em;
  width:300px;
  height: 10px;
  margin: 2px;
}

.r2
{
background-color:blue;
  display: inline-block;
  border-width:1px;
  border-style:solid;
  border-color:#808080;
  padding:0.3em;
  width:300px;
  height: 10px;
  margin: 2px;
}

.r1
{
background-color:green;
  display: inline-block;
  border-width:1px;
  border-style:solid;
  border-color:#808080;
  padding:0.3em;
  width:300px;
  height: 10px;
  margin: 2px;
}

Wie bekomme ich die 3 Boxen samt Text (neben der Box) untereinander? Wenn ich ein echtes Block-Element aus der Box mache, steht der Text nicht mehr neben der Box. Für den Text ein eigenes Block-Element zu machen, finde ich auch seltsam und ein <br> noch viel seltsamer.

Jörg