How to place circle and text in one line? - html

Question

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?
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 1

Just give float: left; to .half-circle
.half-circle {
background: white;
height: 100%;
width: 20%;
border-radius: 00px 50px 50px 0px;
display: flex;
align-items: center;
float: left;
}
Working Fiddle

Answer 2

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>

Answer 3

One way to achieve what you want using a lot less markup would be to use an absolutely positioned pseudo-element, like so:
div{
background-color:#b7b7b7;
height:10vh;
padding-left:calc(20% + 10px);
/* Left padding should be at least the same width as the pseudo-element - I added 10px to create some space between it and the content */
position:relative;
}
div::before{
background:#fff;
border-radius:0 50px 50px 0;
bottom:0;
content:"";
left:0;
position:absolute;
top:0;
width:20%;
}
/** Add the following if you want to center the children vertically in the parent **/
div{
align-content:center;
display:flex;
flex-wrap:wrap;
}
p{
flex:0 0 100%;
}
/** Presentational stuff for this Snippet **/
*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
div{border:1px solid #999;margin:10px;}
<div>
<p>First line</p>
<p>Second line</p>
</div>

Answer 4

you did not use flex properly nor in the right place.
If you make your circle and a container holding the text sibblings, it will easily work:
.summarize {
background-color: #B7B7B7;
}
.top-button {
height:3em;/* vh might not be the best idea ... */
display: flex;
align-items: center;
}
.half-circle {
background: white;
height: 100%;
width: 20%;
border-radius: 00px 50px 50px 0px;
}
p {
margin: 0;
}
<div class="summarize">
<div class="top-button">
<span class="half-circle"></span>
<div>
<p>
First line</p>
<p>
Second line</p>
</div>
</div>
</div>
https://jsfiddle.net/Loj4Lgkq/4/
increase container height ?
.summarize {
background-color: #B7B7B7;
}
.top-button {
height:10em;/* vh might not be the best idea ... */
display: flex;
align-items: center;
}
.half-circle {
background: white;
height: 100%;
width: 20%;
border-radius: 00px 50px 50px 0px;
}
p {
margin: 0;
}
<div class="summarize">
<div class="top-button">
<span class="half-circle"></span>
<div>
<p>
First line</p>
<p>
Second line</p>
</div>
</div>
</div>

Answer 5

That will work:
.summarize {
background-color: #B7B7B7;
}
.top-button {
height: 10vh;
}
.half-circle {
background: white;
height: 100%;
width: 20%;
border-radius: 00px 50px 50px 0px;
display: inline-block;
align-items: center;
}
<div class="summarize">
<div class="top-button">
<span class="half-circle"></span>
<span>First line</span>
<span>Second line</span>
</div>
</div>