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
ou ao menos clear:left
no elemento seguinte, para garantir que ele comece na linha de baixo, pelo fato de ter deixado espaço para outras coisas depois do parágrafo.