Is it possible to align the textarea to the right side of its sibling row using justify-content: space-between?

My rows consist of two sides: the right side with text and the left side with buttons, separated by justify-content: space-between;

However, for the last row, I want to add a textarea that starts from the right-most side of the buttons.

Is there a way to achieve this? Currently, the textarea starts from the left side of the buttons in the code snippet below. I'm looking for a solution where it starts from the rightmost button instead.

I've been struggling to find a solution due to the dynamic nature of the space the buttons occupy, which affects their positioning on the right side?

.container {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  justify-content: space-between;
}

.text {
  align-self: center;
}

.buttons {
  display: flex;
  text-align: right;
}

.button {
  border-radius: 10px;
  padding: 10px;
  margin-left: 10px;
  height: 20px;
  width: 50px;
}

.button.row_one {
  background: purple;
  border: 1px solid black;
}

.button.row_two {
  background: red;
  border: 1px solid black;
}

textarea {
  resize: none;
  border-radius: 10px;
  padding: 10px;
  margin-left: 10px;
  height: 20px;
}
<div class="container" dir="rtl">
  <div class="row">
    <div class="text">
      <p>Row 1</p>
    </div>
    <div class="buttons">
      <div class="button row_one"></div>
      <div class="button row_one"></div>
      <div class="button row_one"></div>
      <div class="button row_one"></div>
      <div class="button row_one"></div>
    </div>
  </div>
  <div class="row">
    <div class="text">
      <p>Row 2</p>
    </div>
    <div class="buttons">
      <div class="button row_two"></div>
      <div class="button row_two"></div>
      <div class="button row_two"></div>
      <div class="button row_two"></div>
      <div class="button row_two"></div>
    </div>
  </div>
  <div class="row">
    <div class="text">
      <p>Row 3</p>
    </div>
    <div class="textarea">
      <textarea>Hello</textarea>
    </div>
  </div>

</div>

htmlcssflexbox

Answer №1

To achieve the desired layout, it is recommended to implement a two-column structure with rows of consistent height.

Here is a suggested code revision:

.container {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  justify-content: space-between;
}

.text {
  align-self: center;
  height: 20px;
}

.buttons {
  display: flex;
  text-align: right;
}

.button {
  border-radius: 10px;
  padding: 10px;
  margin-left: 10px;
  height: 20px;
  width: 50px;
}

.button.row_one {
  background: purple;
  border: 1px solid black;
}

.button.row_two {
  background: red;
  border: 1px solid black;
}

textarea {
  resize: none;
  border-radius: 10px;
  padding: 10px;
  margin-left: 10px;
  height: 20px;
}
<div class="container" dir="rtl">
  <div class="row">
    <div class="col">
      <div class="text">
        <p>Row 1</p>
      </div>
      <div class="text">
        <p>Row 2</p>
      </div>
      <div class="text">
        <p>Row 3</p>
      </div>
    </div>
    <div class="col">
      <div class="buttons">
        <div class="button row_one"></div>
        <div class="button row_one"></div>
        <div class="button row_one"></div>
        <div class="button row_one"></div>
        <div class="button row_one"></div>
      </div>
      <div class="buttons">
        <div class="button row_two"></div>
        <div class="button row_two"></div>
        <div class="button row_two"></div>
        <div class="button row_two"></div>
        <div class="button row_two"></div>
      </div>
      <div class="buttons textarea">
        <textarea>Hello</textarea>
      </div>
    </div>
  </div>
</div>

Answer №2

I devised a rather unconventional solution that involves utilizing the absolute property on an otherwise invisible element, particularly for the 3rd row as illustrated below:

/* Updated CSS */
.button.row_invisible {
  border: 1px solid black;
  visibility: hidden;
}

.textarea {
  position: absolute;
}

<!-- follows the same structure as the previous rows -->
<div class="row">
  <div class="text">
    <p>Row 3</p>
  </div>
  <div class="buttons">
    <!-- invisible row -->
    <div class="button row_invisible"></div>
    <div class="button row_invisible"></div>
    <div class="button row_invisible"></div>
    <div class="button row_invisible"></div>
    <div class="button row_invisible"></div>
    <!--// invisible row -->

    <!-- absolute textarea starting from right -->      
    <div class="textarea">
      <textarea>Hello</textarea>
    </div>
  </div>
</div>


.container {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  justify-content: space-between;
}

.text {
  align-self: center;
}

.buttons {
  display: flex;
  text-align: right;
}

.button {
  border-radius: 10px;
  padding: 10px;
  margin-left: 10px;
  height: 20px;
  width: 50px;
}

.button.row_one {
  background: purple;
  border: 1px solid black;
}

.button.row_two {
  background: red;
  border: 1px solid black;
}

.button.row_invisible {
  border: 1px solid black;
  visibility: hidden;
}

.textarea {
  position: absolute;
}

textarea {
  resize: none;
  border-radius: 10px;
  padding: 10px;
  margin-left: 10px;
  height: 20px;
}
<div class="container" dir="rtl">
  <div class="row">
    <div class="text">
      <p>Row 1</p>
    </div>
    <div class="buttons">
      <div class="button row_one"></div>
      <div class="button row_one"></div>
      <div class="button row_one"></div>
      <div class="button row_one"></div>
      <div class="button row_one"></div>
    </div>
  </div>
  <div class="row">
    <div class="text">
      <p>Row 2</p>
    </div>
    <div class="buttons">
      <div class="button row_two"></div>
      <div class="button row_two"></div>
      <div class="button row_two"></div>
      <div class="button row_two"></div>
      <div class="button row_two"></div>
    </div>
  </div>
  <div class="row">
    <div class="text">
      <p>Row 3</p>
    </div>
    <div class="buttons">
      <div class="button row_invisible"></div>
      <div class="button row_invisible"></div>
      <div class="button row_invisible"></div>
      <div class="button row_invisible"></div>
      <div class="button row_invisible"></div>
      
      <div class="textarea">
        <textarea>Hello</textarea>
      </div>
    </div>
  </div>

</div>

Answer №3

To make it align to the right, you can utilize the CSS property margin-right:0

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

Discrepancy in the vertical pattern repetition of the SVG background

When I use a simple div with an SVG set as a background image with vertical repeat, I noticed a gap of varying sizes on Chrome and Firefox depending on the screen size (please resize the window). Check out the issue here .bg { width: 50%; height: 2 ...

htmlcsssvg

Choose from a variety of video play options

Being new to javascript, I've successfully combined two functions that control video playback, but they seem to be conflicting with each other. The first function is designed to offer custom pause and play controls for the video // VIDEO CONTROLS STA ...

javascripthtmldomdom-events

Is it possible to create a HTML 5 tile with a contemporary Metro-style UI?

I am curious to know if it is possible to replicate the tile system found in the modern UI of Windows 8 on an HTML page. I have already created a demo based on a website. You can view it here. Below is the code snippet: <div class="tile pos1-1 w1h1 te ...

javascriptcsshtmlmodern-ui

Tips for accessing a URL with a specific value in the HTML file

This form submits a URL in this format: <form action="search.php?search=" method="GET" id="search-form"> <input id="search-text" name="search" type="text" maxlength="30" placeholder="type keyword"/> <button type="submit" name ...

phphtmlformswebforms

Strategies for detecting changes in multiple HTML select elements with jQuery

I currently have three select HTML tags and I would like to filter my table using the selected values (group of selected tags) with an AJAX request. For example, filtering by Gender, Location, and Season. My question is how can I achieve this without dup ...

jqueryhtmlajaxselect

Issue with PHP redirection not functioning as expected upon submission

Thank you for taking the time to offer assistance. I am encountering an issue with a basic HTML contact form that utilizes a PHP file for processing. The form's method is set to post and it directs its action to a PHP file. Upon completion of the PHP ...

phphtmlformshttp-redirect

What is the best way to gather the "name" and "value" attributes from a designated section of a form using JavaScript and store them in an array?

How can I extract the "name" and "value" attributes from a specific section of a form and store them in an array using JavaScript? Here is the section of the form in question: <div class="multiPickerForm"> <input type="text" name="Id" value="1"& ...

javascriptjqueryhtmlarraysobject

Parsing CSS with PHP

Having an issue with my CSS link for images and need some assistance: background-image:url(images/background.gif); I'm looking to adjust the directory by adding ../. The code I aim to modify is as follows: background-image:url(../images/background. ...

phpcssparsing

What causes materialui styles to vanish upon refreshing in nextjs?

After consulting the materialui documentation (https://material-ui.com/guides/server-rendering/), I was able to find a solution, but I am still unsure of the underlying reason. Why does the style work initially during rendering but disappear upon subs ...

cssmaterial-uinext.jsserver-side-rendering

Incorporating rounded corners to an embedded YouTube video

Check out this JSFiddle link. The border-radius property appears to be working correctly at first, but then the rounded corners suddenly disappear shortly after loading. Is there a way to apply rounded corners to YouTube videos that are embedded on a webp ...

cssyoutube

Identifying the language of characters written in English, Vietnamese, or Myanmar

My website is designed to support three languages - English, Vietnamese, and Myanmar. Users can submit content in any of these languages, and their submissions are stored in the database. When the content is displayed, I need to determine the language in w ...

javascripthtmlcssfonts

What is the best way to center all items in a vertical list of text?

Having trouble aligning elements in my Angular app - specifically date, file total, and file size. When one number has more digits than the others, it throws off the alignment. I've attempted adjusting padding margins and using display properties lik ...

htmlcssangular

The function is not being called as expected when using `onclick` or `eventListener('click')`

I'm in the process of developing a login form for my website that will offer 2 options - "login" and "signup". The concept is similar to mini tabs and iframe windows. Essentially, I have two divs side by side for "login" and "signup". When the user cl ...

javascripthtmlcss

Safari: Contenteditable div text without spaces fails to wrap around an image when focused

In a hypothetical dialog layout, there is a div on the left side and an image on the right side. Both the div and the image start at the same vertical point. However, the text in the div is longer than the image. The desired layout is for the text to be di ...

htmlcsscontenteditable

Adding a translucent background image across the entire page in Angular: What's the best method?

I need the background image to extend across the entire page, including covering the Material Data Table. The background should be transparent so that the content of the table remains readable. What is the most effective method to achieve this? Here is th ...

htmlcssangularbackgroundbackground-image

Left-align the text above the div (in relation to it)

My current issue involves aligning h2 text to the left relative to a centered div in the mobile view. How can I achieve this alignment with a media query in the provided CSS? https://i.sstatic.net/sIJb4.jpg CodePen Here is the relevant HTML: <sectio ...

cssflexbox

Perform a jQuery computation using a CSS style

Having trouble with a calculation using a CSS property that is not returning any value. Seems like the issue might be due to the CSS property returning '200px' instead of just '200'. Any suggestions for a workaround? Thanks in advance. ...

jquerycss

Expand or collapse Angular Material Accordion depending on selected Radio button choice

Is it possible to use a mat-accordion with radio buttons where each panel expands only when its corresponding radio button is selected? I have the radio buttons functioning correctly, but the panels are expanding and collapsing with every click rather than ...

javascripthtmlangularangular-materialmaterial-design

New alternative for form-control-feedback in Bootstrap 4

The form-control-feedback class doesn't appear to be included in Bootstrap 4. What is the most effective way to achieve the desired outcome (an icon inside the textbox) using Bootstrap 4? <head> <link rel="stylesheet" href="https://max ...

csstwitter-bootstrapbootstrap-4

Tips for cropping an image using CSS with dimensions specified for width, height, and x and y coordinates

As I work on implementing a cropping feature using react-easy-crop, my goal is to store the user's image along with pixel coordinates that dictate their preferred cropping area. My objective is to utilize the parameters provided by react-easy-crop in ...

javascripthtmlcssreactjs