Utilize flex grid to reposition the final flex item to the right side

I need help with aligning the child divs within a parent div. I have 3 children that I want to display beside each other, except for the last div with "form-message" class, which should be in a new line but to the right, under the div with "form-field" class. Can someone guide me on how to achieve this layout?

.form-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.form-row .form-label {
  width: 35%;
}

.form-row .form-field {
  width: 65%;
}
<div class="form-row">
  <label class="form-label">Your message</label>
  <div class="form-field">
    <textarea name="message"></textarea>
  </div>
  <div class="form-message">
    <p>You can write your message here</p>
  </div>
</div>

Answer №1

To achieve the same width for .form-field and .form-message , use justify-content: flex-end; in .form-row

.form-row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-end;
}
.form-label {
  width: 35%;
}
.form-field, .form-message {
  width: 65%;
}
<div class="form-row">
   <label class="form-label">Your message</label>
   <div class="form-field">
       <textarea name="message"></textarea>
   </div>
   <div class="form-message">
      <p>You can write your message here</p>
   </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

Height constraint disregarded by anchor

I am facing an issue with a large textual menu where the active link space is overlapping onto the other menu items. This is causing difficulty in accurately clicking on a link. For reference, you can check out this example: http://jsfiddle.net/dhyz48j3/1 ...

Avoiding a mouse click event on an HTML element covered by a different HTML element

Utilizing the p5.js library in combination with reactJS, I have successfully created interactive visuals on my screen. Currently, when I click and drag my mouse on the screen, the background (or canvas) changes color thanks to p5.js. However, I am facing ...

Display the div element only when the mouse is hovering over the button

I need a hidden text inside a div that will only appear when the mouse pointer is hovering over a specific button. Here is my current code: // Show help-text on hover $("#help-container") .mouseover(function(e) { $(this).find("#help-t ...

JQuery's animations and their influence on element positioning

My thumbnail animation increases in size on hover, but it is affecting the position of the other images. The issue is that when hovering over an image, the others move down and to the right to make space for the animated one. I want the other images to st ...

What is the best way to modify CSS animation property without causing any disruptions?

Could you help me with modifying this CSS animation? I want to adjust the animation-iteration-count to 1 only when a certain property, status, is added to the element. Currently, the animation is not working as expected. For example: setTimeout(() => ...

What is the best way to horizontally align a div container that houses floating divs using CSS?

I am currently working on a layout that involves a main div container, div#title-box, being vertically and horizontally centered on the page. Inside this main container, I need three additional div containers: div#logo, div#title, and div#subtitle (see cod ...

Designing links within a web application

Currently, I am developing a web application that will contain a high volume of clickable elements. The challenge lies in maintaining a visually appealing design while adhering to web best practices such as using different colors and underlines for links. ...

What is the best way to extract data from dynamically generated radio buttons?

UPDATE I previously attempted the recommended adjustments in the initial response, but encountered issues with radio buttons allowing multiple selections and the label number controlling the top radio button. Subsequently, I have experimented further...I w ...

Unexpected problem arises when using OpenCart with the select element

Currently, I am facing an issue with a plugin that I am working on for OpenCart. The problem arises when I attempt to use the selected function in a select dropdown menu to ensure that a specific option is chosen. Instead of selecting the desired option, ...

When a specific condition is fulfilled, I must retrieve a random response from a designated array

I'm looking for a way to create a system where users can select multiple items and then generate a random answer from those selected options. Currently, I have a setup that requires manual input of options in a comma-separated format, but I want to st ...

Is the image loading promptly? Do we need to adjust the resolution?

Is there a way to decrease the loading time of images? For instance, if I have 20 identical images on my homepage (each sized at 1920x1080) This is the image: I want to crop the image to a fixed size. Here's the CSS code I am using: .startpage_im ...

What is the best way to align content to the right of an image within a card using bootstrap?

I'm struggling to position the content on the right side of an image in a card below the image using bootstrap and CSS. Despite searching online and in the bootstrap documentation, I haven't been able to find a solution to my issue. When the scre ...

Dynamic content with Socket.io in Node.js

I am attempting to create a scenario where nodejs triggers an event in an irc chat that causes a html page (Running on *:3000) to execute some JavaScript. However, I am facing an issue where the showDiv(); function is not being executed as expected. Curre ...

Guide to displaying list-group elements in container 2 after being selected from container 1 in Bootstrap 4

Using bootstrap 4, I have two list-groups in separate containers placed side by side. My goal is to display items in the second container when a list item from the first container is selected. How can I achieve this? The number of rows in the right contai ...

What is the best way to incorporate a JavaScript file into a webpage specifically for browsers that are using IE 7 or an earlier version?

Is there a way to dynamically include a Java Script file depending on a certain condition? For instance, I am looking for a solution to incorporate a JavaScript file that provides JSON support specifically when the user's browser is Internet Explorer ...

On what occasion is a DOM element considered "prepared"?

Here's a question that might make you think twice: $(document).ready(function() { }); Sometimes, the simplest questions lead to interesting discussions. Imagine having a list of elements like this: <body> <p>Paragraph</p> < ...

The search query highlighted in pagination takes us to page 2

I am currently facing an issue with a search function that provides paginated results. The result I receive is correct, but the problem arises when the highlighted page defaults to page 2 instead of page 1 upon clicking the search button. Despite trying ...

Troubleshooting: CSS calc function not functioning properly in Firefox

My goal is to dynamically adjust the widths of td elements in my table. This functionality works smoothly in Chrome and Safari, but not in Firefox. Check out the fiddle here Here is the HTML structure: <table border="0" cellspacing="0" cellpadding="0 ...

Safari (mac) experiencing issues with loading material icons properly on initial attempt

Upon my initial visit to the website, I noticed that the font appeared distorted. https://i.sstatic.net/BtUxI.png However, when I right-clicked and chose "reload page", the fonts were displayed correctly. https://i.sstatic.net/3XUcA.png This issue seem ...

Unable to choose anything beyond the initial <td> tag containing dynamic content

Struggling to implement an onclick delete function on dynamically selected elements, but consistently encountering the issue of only selecting the first element each time. // Function for deleting entries $("#timesheet").on('click', &ap ...