Effective ways to position images within a card alongside a changing title

I have a requirement for displaying multiple cards with dynamic titles fetched from the backend. The challenge is to align images in a row regardless of the title length, ensuring alignment based on the longest title. Below is an illustration of what I am aiming for, and you can check out the JSFiddle link for the current code implementation.

Desired visual representation

.wrapper {
  width: 100%;
  display: flex;
}

.card{
   text-align: center;
   width: 33%;
   background: pink;
   margin-right: 10px;
   padding: 20px 5px;
}

.image {
  margin-top: 20px;
}
<div class="wrapper">
  <div class="card">
    <div class="head">
      <div class="title">
        Hello
      </div>
      <div class="image">
        <img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" /> 
      </div>
    </div>
  </div>
    <div class="card">
    <div class="head">
      <div class="title">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div>
      <div class="image">
        <img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" /> 
      </div>
    </div>
  </div>
</div>

javascripthtmlcsssass

Answer №1

To achieve the desired layout, it is necessary to utilize flexbox on the child elements and then position the image at the bottom of the column.

Note...this approach is effective when dealing with two children only. Aligning multiple children may not be fully supported; refer to Align child elements of different blocks for more information.

.wrapper {
  width: 100%;
  display: flex;
}

.card {
  text-align: center;
  width: 33%;
  background: pink;
  margin-right: 10px;
  padding: 20px 5px;
  display: flex;
  flex-direction: column;
}

.title {
  flex: 1;
}

.image {
  margin-top: auto;
}

.head {
  display: flex;
  flex: 1;
  flex-direction: column;
}
<div class="wrapper">
  <div class="card">
    <div class="head">
      <div class="title">
        Hello
      </div>
      <div class="image">
        <img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
      </div>
    </div>
  </div>
  <div class="card">
    <div class="head">
      <div class="title">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
      <div class="image">
        <img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing CSS Styles in ASP.NET MVC for Multilingual Websites

We are looking to make our ASP-MVC website multicilingual and support different languages. One challenge I am facing is how to apply distinct style-sheets for each language, especially when dealing with right-to-left (RTL) languages like Hebrew or Arabic c ...

jquerycssasp.net-mvc

I am facing an issue where reducing the size of the renderer is causing my click events to be offset. What steps can I

At the moment, my rendered model (which is grey in color) stretches across the entire width of the html page with the mesh centered within that width. I want to reduce this width but when I do so, the click event on the model seems to be misaligned. Three. ...

javascriptthree.js

Maximizing Input Field Utility in React JS

I have a challenge with retrieving values from the input field and passing it to the useEffect. I specifically want the search to be triggered only after pressing the onSearch function. The issue is that I can only capture the value using the onChange func ...

javascriptreactjsreduxmaterial-uiquery-string

Set up an event listener for when geolocation permission is approved

My Setup: I've written some basic code snippet below: const onSuccess = () => { console.log('success'); } const onError = () => { console.log('error'); } navigator.geolocation.getCurrentPosition(onSuccess, onError) ...

javascriptreactjstypescriptgeolocation

What could be the reason behind React's decision to not convert JSX to an HTML component and instead return [object Object]?

Please locate the specified console log within the code snippet provided below. This particular console log outputs a string value, indicating that an object is not being passed in this instance. However, despite this, React fails to recognize the JSX an ...

htmljsonreactjsdomjsx

Which Node.js and npm versions are suitable for use with gulp 3.9.1?

I have Node version 14.19.0, NPM version 6.14.16, and gulp CLI version 2.3.0 installed on my Ubuntu 22.04 computer. Along with that, I also have Local version 3.9.1. The problem arises when running any gulp command as it results in the following error: R ...

ubuntunpmsassgulp

How can I import tamplateData into my JavaScript files in Docpad?

Looking for a DocPad plugin that can preprocess JS files and utilize templateData variables and helpers to access configuration values. While experimenting with Hogan, I managed to retrieve the variables but encountered difficulty in invoking the helpers. ...

javascripttemplatespreprocessornpmdocpad

Callback Method Ajaxify

Just started using Ajaxify and so far it's been a great experience. However, I'm wondering if there is a callback function available that doesn't require any specific inputs in the script. I've searched around but haven't found wh ...

javascriptjqueryajaxcallback

I'm only seeing output on two of my input boxes - what's going on?

Currently in the process of learning JQUERY/HTML, I decided to create a shopping cart. My goal is to display the subtotal, tax, shipping costs, and total cost in input boxes. While I successfully displayed the sub total and shipping cost, I encountered an ...

javascriptjqueryhtml

Storing the selected value from a dropdown box in PHP

Can anyone help me with echoing the $row['price'] based on the user's GPU selection? Your input is greatly appreciated! #adding more content to meet word count requirements. <div id="content"> <table border="1" style="width: ...

javascriptphpsql

Leveraging Angular 6: Implementing custom scripts on a component basis and verifying their presence

I need some help with a script that I want to run on a specific component only. I've managed to add the script to the component, but there are a few issues that I'm unsure how to fix. When I go to the component, the script is added to the DOM b ...

javascriptangularexternal-script

Interactive PNG Sequence Rotation: Explore 360 Degrees

I am facing an issue with my PNG sequence of 360 images, where each image corresponds to a degree of rotation. Currently, I have a React component that updates the rotation based on the mouse position in the window - with x = 0 corresponding to rotation = ...

javascriptreactjsmath

What is the method for placing one object within another object?

This is a sample of my data collection: [ { "column1":"data1", "column2":"data2", "column3":[ { "column31":"data31", "column32& ...

javascriptnode.jsmongodbexpressmongodb-query

JavaScript is failing to match the float and string values

Trying out this code snippet: if(total === balance) { alert("test passed"); } else { alert("test failed"); } In this scenario, total = 10; and balance = 10.00;, yet the output is "test failed". ...

javascripthtmlfloating-pointinteger

Controlling the behavior of React components in response to updates

I'm currently learning ReactJs and utilizing the ExtReact framework for my project. I have successfully implemented a grid with pagination, which is functioning well. I customized the spinner that appears during data loading and it works as expected ...

javascriptreactjsextreact

What is the best way to break out of a function halfway through?

What are your thoughts on using nested if statements? $scope.addToCart = function () { if (flagA) { if (flagB) { if (flagC) { alert('nononono!'); return; } } } e ...

javascriptangularjsfunction

Is it possible to install non-root dependencies in node_modules using NPM?

The repository @superflycss/component-navbox contains the following list of dependencies: "devDependencies": { "@superflycss/component-body": "^1.0.1", "@superflycss/component-display": "^1.0.2", "@superflycss/component-header" ...

javascriptcssnode.jsnpm

Having trouble initializing and retrieving an array from the controller in AngularJS

I tried to set up and retrieve the array values from the controller. Check out the fiddle here. var app = angular.module('carApp', []); app.controller('carAppCtrlr', function ($scope) { $scope.vehicles = [{ type: ' ...

javascriptarraysangularjscontroller

Add buttons to images to provide further explanations

While browsing the Excel Learn website, I came across a picture that displayed buttons explaining various functions in Excel. By clicking on the picture, a menu would open up to further explain the corresponding button. If you want to see this in action, ...

javascripthtmlcss

Struggling to close the dropdown with jquery

Check out this code snippet: https://jsfiddle.net/rajat_bansal/rtapaew5/1/ The jQuery section below is causing some trouble: $(document).ready(function(e) { $(".sub-handle").click(function() { if(!$(this).hasClass('showing-sub&ap ...

jqueryhtmlcssweb