What is the best way to align the left div with the right div?

Here's the challenge: I want to make the left div stretch to the height of the right div

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

and here's the desired outcome

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

Currently, I'm implementing this using bootstrap

<div class="row">
  <div class="col-6">
     <input placeholder="left div" />
  </div>

  <div class="col-6">
     <input placeholder="" />
     <input placeholder="" />
     <input placeholder="" />
     <input placeholder="right div" /> /* This is the right div */
     <input placeholder="" />
  </div>
</div>

I'm undecided on whether to use CSS or javascript for this task.

javascriptcss

Answer №1

.left input {
  height: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="row">
  <div class="col-6 left">
    <input placeholder="left div" />
  </div>

  <div class="col-6 right">
    <input placeholder="" />
    <input placeholder="" />
    <input placeholder="" />
    <input placeholder="right div" />
  </div>
</div>

edit

.left input {
height: 100%;
}

[class^="col-"] {
  background: palegoldenrod
}

.pull-right {
align_items: flex-end;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="row">
  <div class="col-6 left">
    <input placeholder="left div" />
  </div>

  <div class="col-6">
    <input placeholder="" />
    <input placeholder="" />
    <input placeholder="" />
    <input placeholder="right div" /> 
  </div>
</div>
<div class="row justify-content-end">
  <div class="col-6 col-offset-6">
    <input placeholder="" />
  </div>
</div>

Answer №2

One alternative approach is to implement flexbox styling:

.row {
  display: flex;
}
.col-6 {
  display: flex;
  flex-direction: column;
}
.col-6 input {
  display: block;
  margin: 10px;
}
.col-6:first-of-type input {
  flex: 1;
}
<div class="row">
  <div class="col-6">
     <input placeholder="left div" />
  </div>

  <div class="col-6">
     <input placeholder="" />
     <input placeholder="" />
     <input placeholder="" />
     <input placeholder="right 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

Firebase: Saving data to a nonexistent object

I am currently facing a challenge in saving the result of a serviceId to a services object within a parent entity named provider1, especially since the services object has not been initialized yet. The structure of my Firebase data is as follows: "provid ...

javascriptangularjsfirebaseangularfire

Preventing image rotation in an Angular 4 application: Strategies and Solutions

My Angular application allows users to choose a profile picture. During testing, I discovered that when I upload images from an iPhone in portrait mode, they appear rotated in my app. However, when the photos are taken in landscape mode, they display corre ...

javascripthtmlioscssangular

Utilizing AJAX to define the attributes of an object

As a beginner in OOP, I am trying to create an object using an ajax request. My goal is to retrieve 'responseArray' in JSON format and then manipulate it. function address(adres) { this.address_string = adres; var self = this; $.ajax({ typ ...

javascriptajaxoopjquery

What can be done to prevent parallel images from getting displaced while using CSS3 transformation effects?

Currently facing an issue where three separate images are being transformed using CSS3 upon hover. Various attempts have been made, including placing them in divs, a table, or just plain images. Trying to float them all in one direction, with #1 left, #3 ...

css

What is the best way to display long text in a browser alert without it being cut off?

Seeking to display a large amount of data in an alert box, but only a portion is currently visible. The following text is all that can be seen: ["19467,1496257152583","19227,1496256651094","19469,1496257033968","17285, ...

javascriptjqueryhtmlbrowseralert

Issues with CSS styling inheritance in Angular components

I'm facing an issue with a button that is part of an InfoWindow component. The button is not created in the HTML code directly but is called whenever the card component opens. I have integrated this InfoCard into two different sections of the applicat ...

cssangularqueryselectorng-deep

Preventing clashes in namespaces while incorporating Bootstrap into a plugin for WordPress

After creating a WordPress plugin, I am considering revamping its layout with the help of bootstrap CSS and js. However, I have encountered issues in the past due to conflicting CSS naming conventions. I want to ensure that there are no namespace conflicts ...

csswordpresstwitter-bootstrapplugins

Aligning an image in a way that adjusts to different screen sizes

Struggling with centering an image horizontally in a responsive manner while using Bootstrap v3.3.5? Here's my code: <div class="container"> <div style="margin:0 auto;"> <img src="images/logo.png" alt="logo" /> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Bringing in LESS variables to Rails 3

In my assets folder, I have a global.less file where I have defined various site-wide variables. Currently, in order to use these variables in other less files, I have to add this line at the beginning of each file: @import 'global'; While thi ...

cssruby-on-rails-3asset-pipelineless

Adding Logging Features in ASP.NET

I am currently working with an .ascx file that contains both JavaScript and div elements. I need to add a log statement inside a function for troubleshooting purposes. Can someone please guide me on how to achieve this? Below is a snippet of my code: fu ...

javascripthtmlasp.netloggingascx

bootstrap 5 with uneven spacing

I am working on some HTML/CSS code that utilizes Bootstrap 5.2 and the justify-content-between class in order to move two buttons to the edges of a container. <div class="container"> <div class="row"> <div cla ...

htmlcssflexboxbootstrap-5horizontal-alignment

Incorporating a unique font into your SAPUI5 application

While experimenting with an expense app design, I decided to incorporate a receipt-like font for a unique look and feel. After discovering the FakeReceipt font, I placed my woff and woff2 files in the same directory as my style.css file, and it worked like ...

csssapui5custom-font

Update the variable values in the Onclick function

I am trying to modify the onClick function attached to a button. My goal is to change the function var from 'create' to 'update' when the page loads and also through other functions. I attempted the code below but it did not work as exp ...

javascriptjquery

Difficulty arising from the final column of average sums - Information extracted from JSON using Angular JS

I am facing a problem with calculating the average total. I need to determine the average sum using a specific formula, but the code provided does not calculate the last column of Average. I am looking for a desired result and would appreciate any assistan ...

javascriptjqueryangularjssumaverage

Unable to send data using GET method after implementing passportjs integration

In the route.js file, I have implemented the following REST method: app.get('/api/todos', isAuthenticated, function(req, res) { DB.TodoTable.find() .exec(function(err, todos) { res.json(todos, function(err){ if (err) ...

javascriptjsonangularjsrestpassport.js

Is it still necessary to include -webkit- and -moz- prefixes for widely recognized CSS3 properties?

I'm currently in the process of tidying up a CSS file, and I'm contemplating whether it's now acceptable to remove vendor-specific properties if they have been standardized (or at least partially standardized). For instance, should I contin ...

cssvendor-prefix

Tips for seamlessly playing flowplayer while an mp4 file is loading?

Is there a way for the video to play while it is buffering, rather than waiting for the mp4 to be fully loaded? Thank you. ...

javascriptjqueryflowplayer

Utilizing JQuery to extract data from a <select> dropdown menu

Is there a way to retrieve the current value of a SELECT tag using JavaScript or jQuery? I have tried using $('select').val(), but it only returns the default value and does not update when changed. Any suggestions on how to solve this issue? $( ...

javascriptjquery

Are there any available tools or scripting methods for accommodating various vendor prefixes?

My preference is to use standard CSS rules for different styles that include various vendor prefixes. To test, I would start with the following: border-radius: 5px; box-shadow: 0px 0px 4px 0px #fff; transform: rotate(90deg); For the final version, I woul ...

jquerycssutilityvendor-prefix

Exploring the Power of Laravel 5.5 and Vue.js 2.x for Efficient API Calls

Currently, I am working on a Laravel 5.5 project locally that incorporates Vue.js 2.5.9 with XAMP Server. One of the tasks I have is to load certain information onto the DOM and then refresh it upon clicking the "Refresh" button. However, there seems to ...

javascriptphplaravelvue.jsaxios