Creating two equal-sized divs

How can I make the height of a row equal to the height of the smaller column, while the larger one remains scrollable? Is it achievable without the use of JavaScript?

<div class="row">

  <div class="col-md-8">
    <span style="color:white">Wash-type</span>
    <form>
      <!-- dummy data-->
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r1"><span>Option 1</span></label>
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r2"><span>Option 2</span></label>
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r2"><span>Option 3</span></label>
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r2"><span>Option 4</span></label>
    </form>
  </div>

  <div class="col-md-4" style="oveflow:scroll;">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Service Option</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
    </div>
  </div>
</div>

Answer №1

If you're looking for a JavaScript solution and can't find one elsewhere, check out this JSFiddle link

JavaScript Solution

$(window).resize(setHeight);
$(document).ready(setHeight);

function setHeight() {
    var height = $('.left').height();
    $('.row, .right').height(height);
}

CSS Styles

.right {
    overflow-y: scroll;
}

Sample HTML Code


<div class="row">


    <div class="col-md-8 left">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!</p>

        <span style="color:white">Wash-type</span>
        <form>
            <!-- dummy data-->
            <label class="customCheckbox"><input type ="radio"  name="r1" value="r1"><span>Option 1</span></label>
            <label class="customCheckbox"><input type ="radio" name="r1" value="r2"><span>Option 2</span></label>
            <label class="customCheckbox"><input type ="radio" name="r1" value="r2"><span>option 3</span></label>
            <label class="customCheckbox"><input type ="radio" name="r1" value="r2"><span>Option 4</span></label>
        </form>


    </div>

    <div class="col-md-4 right">
        <div class="table-responsive">
            <table class="table">
                <thead>

                    <tr>
                        <th>#</th>
                        <th>Service Option</th>
                        <th>Price <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!Lorem ipsum dolor sit amet, consectetur adipisicing...

                    </tr>

                </thead>
                <tbody>

                </tbody>
            </table>
            </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

Setting the height of an image within a flexbox while allowing for dynamic width

.flex { display: flex; align-items: stretch; } .dblCol { border: 1px solid #999; flex-grow: 2; min-width: 0; padding: 0 10px; } .sglCol { border: 1px solid #999; flex-basis: 33.33333333%; max-width: 33.33333333%; wid ...

Create an image solely upon clicking the mouse

Is there a way to make the "draw image" action occur only when a key or click is pressed? I am new to JavaScript but I have experience with HTML and CSS. Is there a straightforward method to achieve this functionality? <!doctype html> <html> ...

Displaying motion of a vehicle with a series of images

Can anyone provide tips on creating an animation that uses multiple images in CSS or jQuery? I was inspired by a Windows skin and would like to create a rotating car animation. Is this possible? Any advice is greatly appreciated. Thank you! ...

How come JavaScript's history.back() method does not display form values?

I have been developing an HTML form that submits values to a PHP script. When encountering errors, I currently display the error message along with a link containing javascript:history.back(). In Chrome, the form reopens with all values retained from the ...

Enhanced jQuery implementation for hiding elements

I encountered a peculiar issue where jQuery's .is(':hidden') function wrongly returned true for an element that visibly displayed content. You can see the problem demonstrated in this fiddle. The :hidden pseudo checks both offsetWidth and o ...

Adding a CSS class to an HTML <input> element in Vuetify: A complete guide

Incorporating a <v-text-field> to collect user email addresses, I must append the ym-record-keys CSS class to the HTML <input> element in accordance with the Yandex Metrica guideline. My attempt resulted in the class being added to the parent d ...

Issue with directive not activating when attribute is changed

I am facing an issue with my website where users can make selections from two dropdowns, and based on those values, attributes are sent to directives for a corresponding function to be called. The problem I'm encountering is that the directives are n ...

Utilizing HTML5/CSS3: Exploring the Possibility of Using Pseudo Elements to Generate Nested Tags without the Need for Javascript

I've been searching for a reliable method to achieve my goal, but haven't found one yet. However, I thought I'd reach out to the experts here to see if they have any ideas. My aim is to develop a simpler way of styling that allows users to ...

Issues with Input-group-Addon functionality in Bootstrap 4

During my current JavaScript course project using Bootstrap 4, I encountered an issue with the input-group-addon class on a span element. The icon is not displaying as shown in the tutorial. <!doctype html> <html lang="en"> <head&g ...

Achieving Content Centering in React Material UI: A Guide to Aligning to the Middle of the Page

Currently, the button is displaying in the top left corner. How can I move the button to the center of the page? import {Button} from '@mui/material'; function App() { return ( <Button variant="contained">Hello World</ ...

Ways to eliminate class from HTML code

Trying to detect if a navigational element has a specific class upon click. If it has the class, remove it; if not, add it. The goal is to display an active state on the dropdown button while the dropdown is open. The active state should be removed when a ...

Using JavaScript to Align HTML Data to the Right or Left

I have successfully created an HTML table from JSON data and formatted it using JavaScript as required. However, I am facing a challenge with right-aligning all the amounts coming from my JSON data. I want all the numbers to be aligned to the right but I& ...

Finding the index of a table cell's column is a simple task that can be

Is there a way to retrieve the column index of an HTML table element using jQuery? Below is my HTML code snippet: table { border:1px solid navy; width: 70%; text-align: center; } table th { text-align: center; width:100px; height:20px; } table td { widt ...

The request method for Django forms is consistently GET

Below is the provided HTML code snippet: <form method='POST'>{% csrf_token %} {{ form.as_p }} <input type='submit' value='save'/> </form> The corresponding URL path is mapped in url.py as shown below: path(& ...

Issue with closing in JavaScript code not functioning as expected

I recently created a toggle bar using HTML/CSS and I attempted to implement JavaScript code to close it. However, despite my efforts, the script doesn't seem to be functioning properly. Code: $(document).ready(function(){ $(".fa-times").click(functi ...

Should the height of a flex item be defined or should it automatically adjust based on its content?

My issue lies within a flex column container containing two elements with the respective classes of .one and .two nested inside: .container { display: flex; flex-direction: column; } .one { height: 50vh; background: blue; } .two { height: 50 ...

Mastering the art of efficient navigation between various pages

In the create_session.php page, I have included a simple form below. The form action method is set to navigate the user to the "QandATable.php" page upon form submission. However, I would like to implement a conditional logic - if the user enters '1&a ...

Attempting to show an image in an alternative DIV element upon hovering with the mouse

I'm currently working on a dropdown menu with a list of links. Within the drop-down menu, I want to display different images in a separate tag based on a mouseover event. Is it possible to achieve this using CSS without relying on JavaScript? I need a ...

"Create a responsive design featuring two columns on desktop and a single column on mobile using Flexbox layout

Seeking a solution for a flexible layout using flexbox: Requirements for Desktop Layout Consist of two responsive columns 1st column should occupy 30% of the width 2nd column should occupy 70% of the width Mobile Layout Specifications Single column t ...

Maintaining alignment of background elements and div images

I'm struggling to align images properly across different devices. It's more challenging than I anticipated. Currently, on mobile in portrait mode, the image is not displaying as I want it to. Ideally, I want it to be closer to how it looks in la ...