How to place circle and text in one line?


Tags: html,css

Problem :

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;
}


Solution :

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>


    CSS Howto..

    How to specify different Css for different Mobiles (BB, Iphone, Nexus… )

    How can I apply same style from element that changes in HTML to one that doesn't change in HTML?

    How to get rid of space and align two objects in one line in css/html?

    How to remove a element after animation?

    How to use CSS for formatting Crystal Report in Winform?

    Grunt + Sass, how do I include subfolder scss when I compile?

    How to set class on div that is inside of repeater in code behind?

    How to add Print headers and footers in HTML, CSS and JavaScript?

    How to have div horizontally scroll when resized.

    How to arrange elements vertically?

    Validatation error “Value Error : background-position Too many values or values are not” How to solve?

    CSS 100vw causing scrollbar to show, cant use 100% unfortunately

    How do I do the exact opposite [closed]

    How to prevent fixed image from scrolling down?

    How to apply CSS style for the current page link

    How to create circle, square or triangle with JavaScript in HTML?

    How to adapt website to user's Screen Resolution?

    How to define the css :focus state in a jQuery selector?

    How is table cell height calculated?

    How to implement the button css like Spotify play button in the table row

    How to make Wrapper div contain only non-overflowing divs

    CSS HTML how to ignore some css for non ie7 or ie8

    How can I replicate something similar to querySelector in browsers like IE 7 and 6?

    css - How to make the view window grows while the user zooms in?

    Learn how to arrange elements correctly using CSS [closed]

    background image not shown in div elements in mobile jquery

    Chrome & Firefox not rendering bold font-weights of Avenir, but Safari does! How to fix?

    How to display text in the middle?

    How would I change the code to work with a table instead of body? [closed]

    hovering over list item, only one item showing up instead of all