Billy Logan Billy Logan - 1 month ago 6
CSS Question

How to place circle and text in one line?

I have one stripe with white half-circle and two-lined text which is supposed to be next to circle and inside of the stripe. But it goes beyond the borders. If I apply span to these divs, nothing changes. How can I solve this?

enter image description here

JSFiddle

HTML

<div class="summarize">
<div class="top-button">
<span class="half-circle"></span>

<div>First line</div>
<div>Second line</div>
</div>
</div>


CSS

.summarize {
background-color: #B7B7B7;
}

.top-button {
height: 10vh;
}

.half-circle {
background: white;
height: 100%;
width: 20%;
border-radius: 00px 50px 50px 0px;
display: flex;
align-items: center;
}

Answer

While the answer to add float: left; certainly works, here is an option that uses flexbox.

The reason I prefer flexbox is because it can be easier aligned correctly.

.summarize {
  background-color: #B7B7B7;
}

.top-button {
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.half-circle {
  background: #F0F0F0;
  height: 100%;
  width: 20%;
  border-radius: 00px 50px 50px 0px;
  display: block;
}
.text {
  flex: 1;
  padding-left: 15px;
}
.text span {
  display: block;
}
<div class="summarize">
  <div class="top-button">
    <div class="half-circle"></div>
    <div class="text">
      <span>line 1</span>
      <span>line 2</span>
    </div>
  </div>
</div>