How to align textarea height with next input element-CodePudding

I set some input design in my sample app. inside it , I have input and textareas. from perspective view,our requirement is to set height aligned with input element.

I would like to align height of textare with input element close to it.When I simply set them as follows. it distorted.

<div>
  <input value="input test">
  <textarea>textarea test</textarea>
</div>

My desired result is like follows. the height of textare is aligned with input element. How can I achieve this ? Thanks

CodePudding user response：

You can start by doing this:

.wrapper {
    display: flex;
  }
  .wrapper > input {
    margin: 0;
  }

<div >
  <input value="input test">
  <textarea>textarea test</textarea>
</div>

CodePudding user response：

<div style="display: flex; align-items: start;">
  <input value="input test">
  <textarea>textarea test</textarea>
</div>

The form-group div container has the display: flex and align-items: stretch properties, which align the heights of the child elements. The textarea element has the height: 100% property

CodePudding user response：

<div style="display: flex;">
  <input value="input test">
  <textarea>textarea test</textarea>
</div>

CodePudding user response：

To align the height of a text area with the height of the next input element, you can use the CSS height property. You can also use the display: flex and align-items: stretch properties to align the heights of the elements.

Here is an example of how you can align the height of a text area with the height of the next input element:

<style>
  .form-group {
    display: flex;
    align-items: stretch;
  }

  textarea {
    height: 100%;
  }
</style>

<div >
  <textarea></textarea>
  <input type="text" />
</div>

The form-group div container has the display: flex and align-items: stretch properties, which align the heights of the child elements. The textarea element has the height: 100% property, which makes its height match the height of its parent container. This will align the height of the text area with the height of the next input element.