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:
.reduzido { float:left; background-color: #fc9 }
.texto { clear:both }
<p class="reduzido">CONSULTÓRIO</p>
<p class="texto">Texto texto texto texto texto texto texto.</p>
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.