CSS: paragraph in div to appear on same line as div text

Question

How can I get "Current data: " and whatever value the #dataset_name paragraph takes to appear on one line?

<div id="current_data">Current dataset: <p id="dataset_name"></p></div>

thanks!

Answer 1

Try to use:

<div id="current_data">Current dataset: <span id="dataset_name"></span></div>

Spans are, by default, inline elements, p and div are block elements (therefore, they add a "newline"). You could also use <p style="display: inline;">...</p> , but it's better to use span in these cases.

Answer 2

<p> elements are considered blocks by HTML while normal text is inline.

In your CSS put:

p {
  display: inline;
}

and you'll be good.

Answer 3

Why not

<p id="current_data">Current dataset: <span id="dataset_name"></span></p>

It makes more semantical sense (as long as its not really a table).