Stack 2 cards inside a DIV vertically using Materialize CSS

My form and table are currently positioned side by side in 2 columns:

https://i.sstatic.net/croh3.png

The layout of this form/table is built using datatable + materialize CSS.

I am looking to place the Form and table within a div to ensure that the bottom of both elements are always aligned.

Despite searching extensively, I have yet to find a suitable solution.

Below is the code snippet:

<div class="divider"></div>
              <!--Basic Form-->
              <div id="basic-form" class="section">
                <div class="row">
                  <div class="col s12 m4 l4">
                    <div class="card-panel">
                      <h4 class="header2">Add or Modify</h4>
                      <div class="row">
                        <form class="col s12">
                          <div class="row">


                            <div class="input-field col s2">
                              <input type="number" id="id" name="id" class="form-control" placeholder="Id" />
                              <label for="id">Id</label>
                            </div>

                            <div class="input-field col s10">
                              <?php 
                        //// function populate ($sql, $class,$name, $id, $title, $value,$option)

                             echo populate ("SELECT * FROM product_family order by product_type_id ASC","form-control","nm","nm","Select Product", "product_family", "product_family");?>
                              <label for="nm">Product</label>
                            </div>
                          </div>
                          <div class="row">
                            <div class="input-field col s6">
                              <input type="number" step=".01" placeholder="0.00" id="em" name="em" class="form-control" />
                              <label for="em">Win</label>
                            </div>


                            <div class="input-field col s6">
                               <input type="number" step=".01" id="hp" name="hp" class="form-control" placeholder="0.00"/>
                              <label for="message">Drop</label>
                            </div>
                          </div>
                          <div class="row">
                            <div class="input-field col s12">
                              <?php 
                        //// function populate ($sql, $class,$name, $id, $title, $value,$option)

                             echo populate ("SELECT * FROM currency order by id ASC","form-control","ad","ad","Select Currency", "currency", "currency");?>
                              <label for="ad">Currency</label>
                            </div>
                            <div class="row">
                              <div class="input-field col s12">

                                 <button type="button" id="save" class="btn btn-primary" onclick="saveData()">Save</button>
                                 <button type="button" id="update" class="btn btn-warning" onclick="updateData()">Update</button>

                              </div>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                  <!-- Form with placeholder -->
                  <div class="col s12 m8 l8">
                    <div class="card-panel">
                      <h4 class="header2">Products In DB</h4>
                      <div class="row">
                            <table id="table1" class="table table-bordered table-striped table-hover display compact" cellspacing="0" width="100%">
                            <thead>
                            <tr>
                            <th width="20">ID</th>
                            <th>Product</th>
                            <th>Win</th>
                            <th>Drop</th>
                            <th width="100">Currency</th>
                            <th width="100">Action</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                            </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>  
          </div>

Answer №1

To resolve the problem, include this CSS code:

.section .row {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    word-break: break-word;
}

.section .card-panel {
    height: 100%;
}

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

What can be done to prevent inputs from shifting when resizing a browser window?

I am struggling to align checkboxes and text on a PHP form I am creating. No matter what I try, they end up misaligned when the browser is resized. Any suggestions on how to solve this alignment issue without changing the format of the rest of my page wou ...

How to truncate lengthy text in a table on mobile screens using Bootstrap 4

I am currently working on a responsive table that needs to display correctly on both desktop and mobile devices. However, I have run into an issue where long text in the table gets truncated on mobile devices, compromising the responsiveness of the design. ...

Utilization of CSS with the symbols of greater than and asterisk

I've been experimenting with Sequence.js and finding it really impressive. There's one line of code that I'm having trouble understanding: #sequence .seq-canvas > * {...} I discovered that the > symbol selects only direct descendant ...

Generating various header graphics through PHP's header include feature

I'm currently working on a multi-page website that utilizes a header include feature. The background image is already set within a container in the header using CSS, but now I want to have different header images for each page. Since I am still new to ...

Progress Bar Modules

I am currently working on creating a customizable animated progress bar that can be utilized as follows: <bar [type]="'health'" [percentage]="'80'"></bar> It is functional up to the point where I need to adjust different p ...

Changing color when mouse hovers using Jquery

Currently, I am in the process of converting a flash ad into an html5 ad. I found this demo here, and I would like to replicate the mouse hover effect showcased. When the cursor hovers over the details text in the banner, the entire background changes to ...

HTML5 input placeholder adapts its size and position dynamically as data is being

During my interaction with the input fields on my bank's website, I noticed that the placeholder text undergoes a unique transformation. It shrinks in size and moves to the upper-left corner of the input field while I am entering information. Unlike t ...

The text inside a paragraph tag is causing other elements to shift when the window size is changed

With three divs displayed inline, each containing an image, heading, paragraph, and anchor tags, a design issue arises. The inconsistency in text lengths under the images causes visual discrepancies when resizing the window. For example, while the first tw ...

Troubleshooting issue with JQuery AJAX loading Bootstrap Dropdowns

I have a website on GitHub Pages that uses Bootstrap, but I'm having issues with the drop-down menu in the navbar. Sometimes it works and sometimes it doesn't. I am using $("#nav").load("url"); to load the navbar so that I can make changes and ha ...

CSS: The Ultimate Guide to Concealing the Second Row in a Table

I have a single table in my code: <table> <tr><td>sample data 1</td></tr> <tr><td>sample data 2</td></tr> <tr><td>sample data 3</td></tr> <tr><td>sample data 4</t ...

What is the best way to use a button to hide specific divs upon clicking?

Is there a way to use a button onclick event to hide specific divs within a parent div? I've tried using .toggleClass('.AddCSSClassHere') but I'm not sure how to apply it to multiple divs. The jQuery snippet provided only allows me to h ...

Getting tags with text containing specific substring by utilizing CSS selectors

Here is the HTML snippet I am working with: <tr bgcolor="#DEDEDE"> <td> <b>OK:Have idea</b> </td> <td> <b>KO:Write code</b> </td> <td> <b>KO:Ru ...

JavaScript slice() method displaying the wrong number of cards when clicked

In my code, I have a section called .registryShowcase. This section is designed to display logos and initially shows 8 of them. Upon clicking a button, it should load the next set of 8 logos until there are no more left to load (at which point the button ...

Position the mat-icon button in the top right corner for the close button

I'm struggling with positioning my close icon button at the top right corner of my dialog box. Here is my app-iconbutton component: <button mat-icon-button class="iconbutton" [ngStyle]="{ 'background-color': back ...

Utilizing Python and Selenium to Locate an Element Based on Text Within a Span Class

My challenge is locating an element without any ID or distinctive identifiers. The HTML code structure resembles the following: <div class="item_select"> <span class="item_selection_number">A </span> </div> <div class="item_ ...

The alignment issue persists in HTML/CSS despite troubleshooting efforts

I am facing a challenge while attempting to center text within a modal window, despite my efforts the text remains uncentered. This is my HTML code: <div ng-init="modalCompassDir()"> <div class="myModal"> <img class='floor ...

Changing the background color to white causes the progress bar line to become indiscernible

Here's how my form appears: Once I set the container to be: <div class="container" style="background:white;"> I want to make it white and ensure that the progress bar is visible. Any suggestions on how to achieve this? CSS: ...

What is the best way to arrange elements above and below each other in a single flexbox container?

Currently, I am facing a challenge aligning the number 238,741 and the letter N in Number. There is a padding between the Prize Pool div and the Number Active div. All of these elements are enclosed within a parent container with display set to flex and fl ...

Library or theme with CSS that does not require the use of HTML classes

While there are many popular CSS libraries like Bootstrap and Foundation, they all require adding specific classes to HTML tags for styling. However, I find it tedious to add individual classes like .form-control from Bootstrap to every input element on m ...

Incorporate pug and sass into your React project for a more

Are pug/jade and sass compatible with react? I enjoy organizing my code by separating files, and the functionality that sass and pug provide is great for this purpose. Is there a way to integrate pug and sass into a react project? Pug example: doctype ...