html/css h3 and p tag on one row-CodePudding

I have this html code

<h3>City </h3><p>London</p>

and this is my css

.details>h3{
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    margin: 10px 0 15px 0;
}
.details>p{
    color: #a0a0a0;
    font-size: 15px;
    line-height: 30px;
    font-weight: 400;
    text-align: justify;
}

But the text is on two rows

I want to City and the name of the city to be on 1 row. How to make it to look like this?

How to make it to look like this?

CodePudding user response：

Both h3 and p are by default block-level elements. Means they have by default a width of 100%. As such they are displayed below each other.

The easiest way to display them next to each other is to convert them to an inline-element with display: inline or display: inline-block.

h3, p {
  display: inline;
}

<h3>City </h3><p>London</p>

Alternatively, you can align block-level elements next to each other with a parent that has display: flex

body {
  display: flex;
  align-items: center;
}

<h3>City </h3><p>London</p>

Note, that h3 is a tag for headlines and should only be used for that (Semantical correctness => accessibiltiy => improved SEO rating). If you want to display an element bold and larger use font-size and font-weight instead!

span {
  font-size: 1.17em;
  font-weight: bold;
}

<p><span>City </span>London</p>