Aligning elements in Flex Item

adraganov · September 6, 2022, 9:09pm

Hi guys,
I am trying to create a pricing table using only HTML and CSS. I have created the basic layout, but now I do not know how to align the text, buttons and containers, so they look equal to each other even if some of them have more text. Below you can see the current layout and style.

Photo:

Here is the code:

<style>
    .pricing-plan {
    width: 300px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    font-family: Futura-light;
    font-size: 16px;
    line-height: 1.5;
    color: black;
    margin: 15px; 
}

.pricing-plan__highlighted {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    transform: scale(10);
}


.pricing-plan__special-text {
    padding: 10px;
    text-align: center;
    font-weight: bold;
    color: white;
    background: #125e68;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset;
}

.pricing-plan__header  {
    padding: 25px;
    background: #65e6f7;
    color: black;

}

.pricing-plan__title, 
.pricing-plan__summary{
    margin: 0;
    text-align: center;
}

.pricing-plan__title {
    font-size: 1.5em;
    font-weight: 400;
} 

.pricing-plan__summary {
    font-size: 1em;
    font-weight: 300;
}

.pricing-plan__description {
    padding: 25px;

}

.pricing-plan__list {
    padding: 0;
    margin: 0;
}

.pricing-plan__feature {
    list-style: none;
    margin: 0;
    padding-left: 25px;
    position: relative;
    font-size: 0.9em;
}

.pricing-plan__feature:not(:last-child) {
margin-bottom: 05.em;
}

.pricing-plan__feature::before {
    content: "\2714";
    color: #65e6f7;
    left: 0;
    position: absolute;
}

.pricing-plan__actions {
    padding: 25px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.pricing-plan__button {
    display: inline-block;
    margin: 15px auto;
    padding: 8px 20px;
    text-decoration: none;
    color: #253c57;
    background: white;
    border-radius: 5px;
    border: 1px solid #465f7c;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: bold;
    text-align: center;
}

.pricing-plan__button:hover {
    background: #65e6f7;
    color: white;
}

.pricing-plan__cost {
    margin: 0;
    text-align: center;
    font-size: 2em;
    color: black;
}

.pricing-plan__text {
    font-size: 0.9em;
    text-align: center;
    margin: 0 0 10px 0;
}

.pricing-plan__container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    flex-wrap: wrap;
}
</style>



<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="pricing-table.css">
</head>

<body>
    <div class="pricing-plan__container">
        <section class="pricing-plan">
            <div class="pricing-plan__header">
                <h1 class="pricing-plan__title">Training Coaching</h1>
                <h2 class="pricing-plan__summary">For those getting started</h2>
            </div>
            <div class="pricing-plan__description">
                <ul class="pricing-plan__list">
                    <li class="pricing-plan__feature">Fully tailored training programme adapted to your goals</li>
                    <li class="pricing-plan__feature">Technical review of the exercises</li>
                    <li class="pricing-plan__feature">Bodyweight/gym equipment</li>
                    <li class="pricing-plan__feature">Home/gym based</li>
                    <li class="pricing-plan__feature">Video Demonstration</li>
                    <li class="pricing-plan__feature">Weekly check-ins</li>
                    <li class="pricing-plan__feature">24/7 WhatsApp contact</li>
                </ul>
            </div>
            <div class="pricing-plan__actions">
                <p class="pricing-plan__cost">&pound 60</p>
                <p class="pricing-plan__text">per month</p>
                <a href="./" class="pricing-plan__button">BOOK A FREE CONSULTATION</a>
                <p class="pricing-plan__text">Minimum spend $816 over 12 months</p>
            </div>
        </section>
        <section class="pricing-plan priicng-plan__highlighted">
            <div class="pricing-plan__special-text">Recommended </div>
            <div class="pricing-plan__header">
                <h1 class="pricing-plan__title">Vip Online Coaching</h1>
                <h2 class="pricing-plan__summary">For those getting started</h2>
            </div>
            <div class="pricing-plan__description">
                <ul class="pricing-plan__list">
                    <li class="pricing-plan__feature">Fully tailored macronutrient/nutritional guide</li>
                    <li class="pricing-plan__feature">Fully tailored training programme</li>
                    <li class="pricing-plan__feature">Exercise technique analysis</li>
                    <li class="pricing-plan__feature">Supplement guidance</li>
                    <li class="pricing-plan__feature">24/7 WhatsApp contact</li>
                    <li class="pricing-plan__feature">Weekly check-ins</li>
                </ul>
            </div>
            <div class="pricing-plan__actions">
                <p class="pricing-plan__cost">&pound 120</p>
                <p class="pricing-plan__text">per month</p>
                <a href="./" class="pricing-plan__button">BOOK A FREE CONSULTATION</a>
                <p class="pricing-plan__text">Minimum spend $816 over 12 months</p>
            </div>
        </section>
        <section class="pricing-plan">
            <div class="pricing-plan__header">
                <h1 class="pricing-plan__title">Nutrition Coaching</h1>
                <h2 class="pricing-plan__summary">For those getting started</h2>
            </div>
            <div class="pricing-plan__description">
                <ul class="pricing-plan__list">
                    <li class="pricing-plan__feature">Adapted to your goals, personal preferences and allergies</li>
                    <li class="pricing-plan__feature">Fully tailored nutritional plan</li>
                    <li class="pricing-plan__feature">Shopping guidance</li>
                    <li class="pricing-plan__feature">24/7 WhatsApp contact</li>
                    <li class="pricing-plan__feature">Weekly check-ins</li>
                </ul>
            </div>
            <div class="pricing-plan__actions">
                <p class="pricing-plan__cost">&pound 60</p>
                <p class="pricing-plan__text">per month</p>
                <a href="./" class="pricing-plan__button">BOOK A FREE CONSULTATION</a>
                <p class="pricing-plan__text">Minimum spend $816 over 12 months</p>
            </div>
        </section>
        <section class="pricing-plan">
            <div class="pricing-plan__header">
                <h1 class="pricing-plan__title">3 Months Online Coaching</h1>
                <h2 class="pricing-plan__summary">For those getting started</h2>
            </div>
            <div class="pricing-plan__description">
                <ul class="pricing-plan__list">
                    <li class="pricing-plan__feature">Fully tailored macronutrient/nutritional guidance</li>
                    <li class="pricing-plan__feature">Fully tailored training programme</li>
                    <li class="pricing-plan__feature">Supplement guidance</li>
                    <li class="pricing-plan__feature">24/7 WhatsApp contact</li>
                    <li class="pricing-plan__feature">Weekly check-ins</li>
                </ul>
            </div>
            <div class="pricing-plan__actions">
                <p class="pricing-plan__cost">&pound 300</p>
                <p class="pricing-plan__text">per 3 months</p>
                <a href="./" class="pricing-plan__button">BOOK A FREE CONSULTATION</a>
                <p class="pricing-plan__text">Minimum spend $816 over 12 months</p>
            </div>
        </section>
        <section class="pricing-plan">
            <div class="pricing-plan__header">
                <h1 class="pricing-plan__title">Video Consultation</h1>
                <h2 class="pricing-plan__summary">For those getting started</h2>
            </div>
            <div class="pricing-plan__description">
                <ul class="pricing-plan__list">
                    <li class="pricing-plan__feature">Overcoming healthy lifestyle barriers</li>
                    <li class="pricing-plan__feature">Psychonutritional barriers</li>
                    <li class="pricing-plan__feature">Training questions</li>
                </ul>
            </div>
            <div class="pricing-plan__actions">
                <p class="pricing-plan__cost">&pound 40</p>
                <p class="pricing-plan__text">per month</p>
                <a href="./" class="pricing-plan__button">BOOK A FREE CONSULTATION</a>
                <p class="pricing-plan__text">Minimum spend $816 over 12 months</p>
            </div>
        </section>
    </div>

</body>

</html>

hbar1st · September 6, 2022, 9:29pm

sounds like you should be using a grid layout

adraganov · September 10, 2022, 6:57pm

@hbar1st thanks for your reply. However I am still struggling and have no idea of how to deal with it. I have managed to make the equal height, but when it comes to the buttons, pricing and the pricing plan title background code I can not make them equal.

hbar1st · September 10, 2022, 7:05pm

So for eg. You want to make everything in the header area (blue area) line up on the same row.

So first you have to draw a grid (like on paper), then put the different elements inside as a mock-up of where each element goes (you may have to split up some nested elements so you can do that).

Once you have arranged on paper where each element is going and how many columns or rows it needs, then you can define that in the css. (You can also account for spacing in between the margins of the rows and columns as needed).

You can also see how others have done like here

lasjorg · September 10, 2022, 8:47pm

You can set the cards to flexbox, give them the same min-height and use a top auto margin on the actions part to push it down.

Obviously, the price plan headers won’t align as they do not have the same amount of content. You can do the same min-height as well but then you have to move the special text inside the header and remove the padding from the recommended header. Setting it to display grid will also let you do content alignment.

Here is an example. I had to give it a different font and depending on just how similar the fonts are some adjustments might be needed when using your own font. I’m also not sure about the header content alignment of the recommended header but whatever.

adraganov · September 11, 2022, 10:51am

Thank you very much @lasjorg . I have learned so much from your explanation. I’ve got a question, how did you figure out the right amount of min-height to put on the pricing-plan and pricing_plan__header container?

Regards

lasjorg · September 11, 2022, 4:17pm

I used the browser dev tools and played with the value until it looked right. Using the dev tools lets you dynamically change values and see the results instantly.

Right-click the element and select Inspect.
In the DOM view make sure you have the correct element selected.
In the Style pane find the selector you want to change the styles for.
For value ranges (e.g. the height) click the value next to the CSS property and use your up/down arrow keys to change the value. Use Shift + up/down arrow keys to move in increments of 10, or Alt + up/down arrow keys to move in increments of 0.1

BTW, if you want a copy of the example you can click the fork button in footer.

Topic		Replies	Views
Having trouble aligning elements HTML-CSS	7	347	May 19, 2022
Flexbox pricing tables aligning problem Code Feedback	5	710	April 29, 2023
CSS Flexbox: Align Elements Using the align-items Property	2	526	January 17, 2021
Looking for a way to align items inline HTML-CSS	3	290	August 23, 2021
Please help with Flexbox HTML-CSS	2	465	March 9, 2021

Aligning elements in Flex Item

Related topics