user5447339 user5447339 - 1 month ago 5
CSS Question

How to display heading and paragraph elements inline in css?

I have a HTML code which contains one heading and 2 paragraph elements:

<div class="inter">

<h4>Note</h4>

<p>To add/remove a dependent or to modify your spouse's insurer information, go to the My Life Events section and follow the instructions.</p>

<p>To modify your beneficiaries, please complete and sign the Beneficiary designation form and return it to your plan administrator.</p>

</div>


I want the above code to be displayed in the following way:enter image description here

I tried using
div.inter>p,h4 { display: inline;}
but by using this I am not able to create a line break between 2 paragraphs(as shown below).


Note: To add/remove a dependent or to modify your spouse's insurer
information, go to the My Life Events section and follow the
instructions.To modify your beneficiaries, please complete and sign
the Beneficiary designation form and return it to your plan
administrator.

Answer

Float the heading <h4>.

* {
  margin: 0;
  padding: 0;
}
.inter > h4 {
  float: left;
  padding-right: .5em;
}
p {
  margin-bottom: 1em;
}
<div class="inter">

  <h4>Note</h4>

  <p>To add/remove a dependent or to modify your spouse's insurer information, go to the My Life Events section and follow the instructions.</p>

  <p>To modify your beneficiaries, please complete and sign the Beneficiary designation form and return it to your plan administrator.</p>

</div>