viereck in div container

[Konni]

hallo,

ich hab eine titelzeile die ich mit css designen möchte.

diese soll blau sein, am ende solle in rotes vierck bündig erscheinen.

<div class="titel">hier steht der titel<span class="viereck"></span></div>

.titel {
   background:#00008B;
   color:#FFF;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding:10px;

.viereck {
   background:#ff0000;
   width:10px;
   height:10px;
)

aber das funktioniert irgendwie nicht so wie es soll.

kann mir jemand bitte sagen was ich da falsch mache.