How to display heading and paragraph elements inline in css?


Tags: html,css

Problem :

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.



Solution :

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>


    CSS Howto..

    How to add html special character (right-arrow) using content property of css? [duplicate]

    How to vertically center text overlapping an image?

    How can I target these children divs with one selector?

    R rmarkdown ioslides - How to include a segue slide?

    How to not lose the css while appending html to an element?

    How can i have CSS3 animating menu like followbubble.com

    How can I show a element on my site when hovered with only JS?

    How to split css shape in half vertically?

    How can I show only a section of a video frame with CSS or JavaScript?

    How to apply css to id generated dynamically?

    How to position three divs horizontally

    How to pull css attributes from

    How to give a line break between buttons in css/html?

    How can I wrap lines of text in an unordered list?

    How to put border bottom only on last-child of dropdown menu

    How can I display an image as a menu item once the user has scrolled down the page 150px?

    How to sharpen an image in CSS?

    HTML: How to style each table cell in a column via CSS?

    How to make navigation bar of pure css slider?

    CSS Key animation: How do I make an image expand and shrink properly?

    how to apply CSS styles in current document recieved from AJAX request?

    How to change buttons to pictures in jquery dialog

    Resize the content of a div based on how many objects are in the div

    How to insulate HTML widget from external CSS

    How to fix angular-strap css

    How to keep footer at the bottom of the page when resizing on bootstrap

    How do I simulate a hover with a touch in touch enabled browsers?

    How to force Google's custom search to be responsive?

    How to place a consistent 5px margin around an inner div without specifiying inner divs height?

    How to display a div over other containts of an html page?