CSS - How to align text and icon in one line

Question

I need to align icon and text inside div in one line as is shown in the following picture:

I use flexbox to place the shopping-cart-icon and shopping-cart-section in one row.

 .shopping-cart-container { display: flex; align-items: flex-end; } .shopping-cart-container .shopping-cart-icon { background-color: blue; padding: 0px; text-align: bbo; } .shopping-cart-container .shopping-cart-section .shopping-cart-name { background-color: green; padding: 0px; } .shopping-cart-container .shopping-cart-section .shopping-cart-price { background-color: yellow; padding: 0px; }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="shopping-cart-container"> <div class="shopping-cart-icon"><i class="fa fa-shopping-cart fa-3x"></i></div> <div class="shopping-cart-section"> <div class="shopping-cart-name">Shopping cart</div> <div class="shopping-cart-price">12 000</div> </div> </div>

But I don't know how to align icon in div shopping-cart-icon and text in div shopping-cart-price to the bottom.Can please help me?

Answer 1

Method 1: Using FLEX

Here I have used flex for solving the problem, given the property of display:flex to the shopping-cart-section . Now you can assign the children of Section ie Cart Name and Cart Price their individual Flex properties. Which are flex-grow . You can find the flex logic in the below example.

 .shopping-cart-container { display: flex; } .shopping-cart-container .shopping-cart-icon { background-color: blue; padding: 0px; border: 1px solid black; } .shopping-cart-container .shopping-cart-section { border: 1px solid black; display: flex; flex-direction: column; } .shopping-cart-container .shopping-cart-section .shopping-cart-name { background-color: green; padding: 0px; flex-grow: 1; } .shopping-cart-container .shopping-cart-section .shopping-cart-price { background-color: yellow; padding: 0px; flex-grow: 1; }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="shopping-cart-container"> <div class="shopping-cart-icon"><i class="fa fa-shopping-cart fa-3x"></i></div> <div class="shopping-cart-section"> <div class="shopping-cart-name">Shopping cart</div> <div class="shopping-cart-price">12 000</div> </div> </div>

Method 2: Using line-height

Here in the below example, you can check using the line-height property. There can be scenarios where it can break, but changes will be very minute for images this small. But for your case, it's better to use Flexbox.

 .shopping-cart-container { display: flex; } .shopping-cart-container .shopping-cart-icon { background-color: blue; padding: 0px; } .shopping-cart-container .shopping-cart-section .shopping-cart-name { background-color: green; padding: 0px; line-height: 25px; } .shopping-cart-container .shopping-cart-section .shopping-cart-price { background-color: yellow; padding: 0px; line-height: 25px; }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="shopping-cart-container"> <div class="shopping-cart-icon"><i class="fa fa-shopping-cart fa-3x"></i></div> <div class="shopping-cart-section"> <div class="shopping-cart-name">Shopping cart</div> <div class="shopping-cart-price">12 000</div> </div> </div>

Answer 2

The easiest approach would be to set the height of all elements.

.shopping-cart-container .shopping-cart-icon { height: 50px;}
.shopping-cart-container .shopping-cart-section div {height: 25px; line-height: 25px; width: 150px; font-weight: bold;}

DEMO: https://codepen.io/anon/pen/NavWej

Answer 3

Assuming I have understood you correctly this can be achieved with a couple of lines of CSS using Flexbox -

.shopping-cart-section {
  display: flex;
  background: green;
  margin-top: auto;
}

Here is Codepen result - https://codepen.io/anon/pen/OxjJeW