CSS Text after div

Question

.legend {
display: table;
width: 40px;
height: 40px;
border-radius: 10px/10px;

}

<div style="background: orange" class="legend"></div> New Order

http://jsfiddle.net/2tx1n99f/

I want the text "New Order" appears next to the round box instead of appearing down. How do I achieve this ?

Answer 1

Changing the display property value to inline-block will do that.

.legend {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: orange;
    vertical-align: middle;/* Ensures that the text is vertically aligned in the middle */
}

<div class="legend"></div> New Order

Answer 2

Use

display: inline-table;

instead of

display: table;

.legend {
  display: inline-table;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: orange;
}

<div class="legend"></div> New Order