Question 44727 in Html Question posted in
Some basic documentation can be found here.

Can I move the textarea to the right side of sibling row with justify-content: space-between? – Html

I have rows that are made of 2 sides: right side with text, and left side with buttons, separated by justify-content: space-between;

For the last row, I want to add a textarea, that would start from the right-most side of the buttons.

Is it possible to do it? In the snippet below you can see the textarea starts from the left side of the buttons. But I want it to start from the right most button, if possible.

I was not able to find a way since the amount of space the buttons take is dynamic, so where they end up in the right side is changing?

.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>
Tags:

3

Answers


  1. 0

    You can use margin-right:0 in order to align to the right

    Login or Signup to reply.
  2. 0

    I come up with a quite dirty solution which using absolute element on invisible element as shown below for 3rd row:

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

.textarea {
  position: absolute;
}

<!-- same structure as previous row -->
<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>
    Login or Signup to reply.
  3. 0

    You will want to use a two column layout with nested rows of consistent height.

    Consider the following refactorization:

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search