PCレイアウトでは改行させてSPでは改行をさせたくない時

レスポンシブのコーディングでありがちな事

レスポンシブ前提のコーディングなんかをしていると、PCレイアウトでは改行させてSPでは改行をさせたくない時なんかがあります。つまり以下のようにデザインをしたい時。

SPでは1行なのでbrとか入れたくないのですが、PCでは改行しないといけない板挟みプレイ。そんな時は以下のようにCSSでインラインとブロック要素を作る。

HTM

<p>ご希望の会場<span class="block">を選択して下さい</span><span class="inline green">必須</span></p>

CSS

.block{
  display: block;
}

.inline{
  display:inline;
  padding:3px 8px;
  border-radius: 5px;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px;
}

.green{
  background-color:#b3d465;
}

こんな感じにするといい感じにいける。改行するだけなら最後のinlineもblockでいいのですが、このままだと「必須」の角丸グリーンの四角装飾が横に長くなってしまうため、inlineにするのがポイント。