komali_2 komali_2 - 23 days ago 6
CSS Question

Vertically positioning a div with a smaller height than a div it is inline with

I have a

<div>
of assigned height next to a
<div>
of variable height depending on the amount of text inside of it. I've managed to get them next to eachother without the right-most
<div>
's text wrapping around and underneath the left
<div>
, but I can't figure out how to get the left
<div>
to align with the top/start of the right
<div>


What I have:

enter image description here

What I want

enter image description here

HTML

<div class='success'>
<span class='introduction'><h4>Some instructions:</h4></span>
<div class='success-instruction'>
<div class='circledNumber'>1</div>
<div class='success-details'>
<h4>Do stuff:</h4>
Assign devlepment devices, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class='success-instruction'>
<div class='circledNumber'>2</div>
<div class='success-details'>
<h4>Set up Things:</h4>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
<div class='success-instruction'>
<div class='circledNumber'>3</div>
<div class='success-details'>
<h4>Be a hero: </h4>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</div>
</div>
</div>


CSS

.success {
display: block;
}
.success .introduction{
margin-bottom: 10px;
margin-top: 10px;
display: block;
}

.success .success-instruction {
margin-bottom: 5px;
white-space: nowrap;
}
.success .circledNumber {
display: inline-block;
background-color: orange;
color: white;
margin-right: 12px;
border-radius: 50%;
width: 18px;
height: 18px;
text-align: center;

}

.success .success-details{
display: inline-block;
white-space: normal;
}

.success h4{
display: inline;
font-size: inherit;
}


JSFiddle

https://jsfiddle.net/3wbcunm7/1/

Answer

In this instance you can get away with just using vertical-align: top; on your icons. JSFiddle.

Comments