Achieve equal heights and vertical alignment for Bootstrap 4 accordion header with floated left and right divs

Building a Bootstrap 4 accordion, I encountered an issue. In the button header, I have two divs with one floating left and the other floating right. The right div contains an image, while the left div contains a title and a subtitle.

Everything works perfectly, except I want the left div to match the height of the right div and for the two titles to be vertically aligned.

Every time I try to adjust the CSS to achieve this, I end up breaking something else in the accordion. I've hit a wall and created a fiddle in the hopes that someone can assist me.

Here is the fiddle link: >> Fiddle <<

<div class="accordion" id="page-accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" style="width:100%;" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    <div class="left">
                        <h5 class="card-title">OCTOBER 2018</h5>
                        <h6 class="card-subtitle mb-2">TODAY IS THE DAY</h6>
                    </div>
                    <div class="right">
                        <img src="pic.png" width="209px" height="119">
                    </div>
                    <div class="clear"></div>
                </button>
            </h5>
        </div>
        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#page-accordion">
            <div class="card-body">
                <p class="card-text">DETAILS COMING SOON</p>
                <a href="#" class="btn btn-danger">Click here for details</a>
            </div>
        </div>
    </div>
</div>

Answer №1

Check out the Improved JSFiddle Here

To ensure uniform height for each item within a container, you can utilize display: flex. Additionally, a slight adjustment was made to your container using h5. Implementing display flex serves as a more convenient alternative to working with float (which can sometimes be complex).

    <!doctype html>
<html lang="en">
<head>
    <!-- Place before all other stylesheets -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>

<body>

<!-- ACCORDION -->
<div class="accordion" id="page-accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" style="width:100%;" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                        <h5 class="card-title">OCTOBER 2018</h5>
                        <h6 class="card-subtitle mb-2">TODAY IS THE DAY</h6>
                </button>
            </h5>
      <div>
        <img src="pic.png" width="209px" height="119">
      </div>
        </div>

        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#page-accordion">
            <div class="card-body">
                <p class="card-text">DETAILS COMING SOON</p>
                <a href="#" class="btn btn-danger">Click here for details</a>
            </div>
        </div>
    </div>
</div>

</body>
</html>

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

Include a Footer on the HTML Document

Having an issue with the placement of my footer in a web application. I've managed to generate XML data to render the HTML page and everything displays correctly except for the footer. The footer is supposed to be at the bottom of the page but it&apos ...

Why does it seem like I can only see one of my two modals?

I'm experiencing an issue with displaying two modals on the same page. The first modal appears correctly, but the second one does not show up. Only the dark "opacity" screen is displayed, without the modal itself. I've tried various solutions fro ...

Unable to utilize external JavaScript files in Angular 8

I've been working on integrating an HTML template into my Angular project and for the most part, everything is going smoothly. However, I've encountered an issue where my JS plugins are not loading properly. I have double-checked the file paths i ...

What is the best way to align certain <li> elements to the right side of a navbar?

After logging in, I am attempting to position specific links on the right side of my navbar. I have tried using pull-right and float-right, but neither seem to work. Can someone clarify why? Below is my code: <header style="background-color:black ...

The bottom row of elements is aligned to the left in a grid that is centered

Within a div with text-align:center, I have multiple same-size blocks set to display:inline-block. | _____ _____ _____ _____ | | | | | | | | | | | | | 1 | | 2 | | 3 | | 4 | | | |_____ ...

The issue with the functionality of the Bootstrap 4 navbar-toggler is causing a

I recently attempted to implement the bootstrap 4 navbar toggler function, but unfortunately, the toggle button did not produce any response (the demo on the official site works perfectly fine), and neither did the dropdown function. I've double-check ...

Issue: The system does not recognize 'cleancss' as an internal or external command

After successfully installing clean-css via npm command line, I was eager to start using it to concatenate and minify some css files. However, my excitement quickly turned to frustration when I encountered this error: 'cleancss' is not recognize ...

Troubleshooting z-index conflict when using :before pseudo element to emphasize list entries

I am experiencing an issue with highlighting items in a list generated by JSTree using the :before pseudo element. The z-indexes seem to be causing some trouble, as adjusting them results in the highlighting appearing either behind all links or in front of ...

What are the best strategies for creating HTML website designs that are both scalable, adaptable, and versatile?

As a beginner in HTML website design, I have recently started using HTML, CSS, jQuery, and JavaScript for designing websites. After creating a site with almost forty webpages, the client requirements are changing, requiring changes to be made across all ...

CSS - Guidelines for Targeting Multiple Elements

My CSS code includes several commands that target similar elements, but the resulting design appears messy. I am seeking advice on a more effective way to select these elements in a conventional manner. Despite consulting documentation, I have resorted to ...

Are there any features in web browsers that support accessibility, such as those designed for sign language?

Many web browsers currently share the user's preferred language with the websites they visit (e.g. in JavaScript: navigator.language || navigator.userLanguage). However, what if a user's native language is sign language, or if they need a simple ...

Creating a reset or refresh button with JavaScript: Step-by-step guide

Can someone please help me figure out how to create a button that will refresh the page while also resetting all values to their default settings? ...

The bootstrap card layout breaks with Google Maps in Chrome and is not functioning properly

I have encountered an issue with the bootstrap card layout and Google Maps integration. When I move the Google Map to a card in a right column, it does not display properly. However, placing it in the first column works perfectly fine. This problem seems t ...

Keeping datetimepicker current when a date is chosen - a guide

I am currently utilizing the datetimepicker plugin from xdsoft to enable users to select a booking date and time. Check out the documentation for more details. To manage bookings, I have set up a 'fechas' table in my database which stores inform ...

What causes the entire page to disappear when the screen is adjusted to mobile width?

I'm facing an issue with my ReactJS screen. Everything works perfectly until I resize the screen to mobile width (sm of Material UI) and then everything turns into a WhiteScreen. I've been trying to debug this but can't seem to find the root ...

Adjust vertical dimension using rich text editor tag

I am currently using JSF with RichFaces version v.3.3.1.GA. I am trying to decrease the height style of the rich:editor tag (using TinyMCE), but for some reason it does not seem to be changing. <rich:editor id="transactionResult" style="height: 10px;" ...

The dropdown menu in the navigation bar is overlapping with the datatable, creating a transparency effect

Working on a website layout that features a navbar at the top and a datatable below. However, when hovering over the navbar to reveal subitems, I notice a transparency issue where the navbar overlaps with the datatable. Below is a simplified version of my ...

What's the deal with the disappearance of the .pull-left and .pull-right classes in Bootstrap 4?

The most recent update has replaced the pull-left and pull-right classes with .pull-{xs,sm,md,lg,xl}-{left,right,none} Now, instead of just using class="pull-right", you'll need to write class="pull-md-right pull-xl-right pull-lg-right pull-sm-right ...

Empower the user with the ability to interact through touch on dynamically

I am trying to make a div touchable and draggable. I have dynamically created 1 to 10 divs within another div. Currently, these divs can only be dragged using the mouse or cursor. However, I want to enable dragging through touch as well. Can anyone provi ...

Improving the pagination performance in AngularJS

I created an HTML template to showcase member details, along with adding pagination functionality to improve initial load time. Currently, I retrieve 15 members from the server at once and display them, allowing users to navigate through more members using ...