Seu CSS está funcionando perfeitamente bem, só faltou entender como funciona o `<p>`. Por padrão, a largura de um parágrafo é 100%, mesmo que o texto não pegue toda a largura. Para obter o efeito desejado, basta mudar essa característica com um `float:left`, ou mesmo um `display:inline-block`. Segue exemplo funcional: <!-- begin snippet: js hide: false --> <!-- language: lang-css --> .reduzido { float:left; background-color: #fc9 } .texto { clear:both } <!-- language: lang-html --> <p class="reduzido">CONSULTÓRIO</p> <p class="texto">Texto texto texto texto texto texto texto.</p> <!-- end snippet --> Desta forma você não tem que desestruturar seu HTML original para obter o efeito desejado, e o elemento continua com as características de bloco. Note que é conveniente usar `clear:both` no elemento seguinte, pelo fato de ter deixado espaço para outras coisas na frente do parágrafo.