CSS 2 x firkanter + tekst på samme linje

Din kode er næsten der! Problemet er sandsynligvis forårsaget af float: left;, som kan påvirke tekstens placering i forhold til firkanterne. Du kan bruge display: inline-block; i stedet for at sikre, at både firkanterne og teksten vises på samme linje. Her er den justerede CSS og HTML:

css
.box {
  display: inline-block;
  height: 17px;
  width: 17px;
  margin-right: 5px;
  border: 1px solid #dddddd;
  vertical-align: middle; /* Justér lodret placering */
}
.gray {
  background-color: gray;
}
.red {
  background-color: red;
}
html
<div class="box gray"></div> Ledig <div class="box red"></div> Optaget
Ved at bruge display: inline-block; placeres dine firkanter og tekst på samme linje, og vertical-align: middle; justerer firkanterne, så de flugter bedre med teksten.

Tusinde tak for input - det spiller.
og dejligt, at du også uddyber :).

Selv tak 😊