dancemc15 dancemc15 - 4 months ago 8
CSS Question

How can I have both a div and heading on the same line?

I'm trying to get both a div and header on the same line. How can I accomplish this? Currently, the red div is on the line after the text.

Thanks.

.underlined {
border-bottom: 1px dotted #000;
text-decoration:none;
}

.block {
height:15px;
background-color: #ff5050;
}


https://jsfiddle.net/zp9wa7hf/

Answer

You can use Flexbox and you don't need to specify fixed width on any element and also you can get vertical-align with align-items: center

.underlined {
  border-bottom: 1px dotted #000;
  text-decoration: none;
}
.block {
  height: 15px;
  flex: 1;
  background-color: #ff5050;
}
h3 {
  display: flex;
  align-items: center;
}
<h3><u class="underlined">ABOUT ME</u><div class="block"></div></h3>