Tips for wrapping text without breaking the input field onto a new line

Question

Tips for wrapping text without breaking the input field onto a new line

I'm struggling to create the following UI design.

[text1] [inputBox1]
[text2] [inputBox2]
[text3] [inputBox3]

The length of text1, text2, and text3 can vary. So, as the length of text increases, their width should also increase, causing the input box to move towards the right. In cases where the text is too long, it should wrap around. Someone suggested using flexbox, but I'm not sure how to get started with it. Can someone please assist me?

Here is the basic structure:

<div>
    <div>text1</div>
    <div>inputBox1</div>
    <div>text2</div>
    <div>inputBox2</div>
    <div>text3</div>
    <div>inputBox3</div>
    .
    .
    .
    .
</div>

html css flexbox

Answer 1

Answer №1

To enhance the structure, enclose every input and text within a div marked with the class line. Then specify that each of these divs should have the CSS property display:flex;.

.line{
  display:flex;
}
input{
  margin-left:auto;
}

<div>
  <div class="line">
    <div>This is a lot of repetitive insignificant text. This is a lot of repetitive insignificant text.</div>
    <input>
  </div>
  <div class="line">
    <div>This is a lot of repetitive insignificant text.</div>
    <input>
  </div>
  <div class='line'>
    <div>text3</div>
    <input>
  </div>
</div>

Answer 2

To enhance the structure, enclose every input and text within a div marked with the class line. Then specify that each of these divs should have the CSS property display:flex;.

.line{
  display:flex;
}
input{
  margin-left:auto;
}

<div>
  <div class="line">
    <div>This is a lot of repetitive insignificant text. This is a lot of repetitive insignificant text.</div>
    <input>
  </div>
  <div class="line">
    <div>This is a lot of repetitive insignificant text.</div>
    <input>
  </div>
  <div class='line'>
    <div>text3</div>
    <input>
  </div>
</div>

Answer 3

Answer №2

Assign a class or id to each div to distinguish between the container and child in your CSS code, like so:

 <div id="container">
    <div id="wrapper">
        <div class="textChild">text1</div>
        <div class="inputChild">inputBox1</div>        
    </div>
    .
    .
    .
  </div>

Then, use CSS to style every div in your container using the flexbox model. The #wrapper is your flexbox container with display: flex, and .textChild and inputChild are your child elements with the flex property defined as 1 or something else. You can find a helpful example on this answer.

Answer 4

Assign a class or id to each div to distinguish between the container and child in your CSS code, like so:

 <div id="container">
    <div id="wrapper">
        <div class="textChild">text1</div>
        <div class="inputChild">inputBox1</div>        
    </div>
    .
    .
    .
  </div>

Then, use CSS to style every div in your container using the flexbox model. The #wrapper is your flexbox container with display: flex, and .textChild and inputChild are your child elements with the flex property defined as 1 or something else. You can find a helpful example on this answer.

Tips for wrapping text without breaking the input field onto a new line

Answer №1

Answer №2

Similar questions

Chrome browser hover malfunction issue

Tips for correctly positioning CSS elements:

The seamless integration of React.js with HTML

Restricting Horizontal Scrolling in Dash DataTable with multi-tiered header (without any additional empty gaps)

Is there any way to have my video begin playing again without manual intervention?

Does the Sass default compiler have built-in autoprefixing capabilities?

Tips for managing the creation of dynamic Bootstrap cards using jQuery

Exploring the world of flexbox and experimenting with implementing flex-wrap at a specific breakpoint

When using Javascript to append content to the body, it may not be displayed as HTML on

Problems with scrolling in Firefox when using Three.JS

Finding the right spot to apply CSS styles in a data table can be a tricky task

How come the position sticky content vanishes when a z-index is applied?

Incorporate an external website into HTML5 code

photographs showcasing the datepicker widget of jquery-ui

The buttons in the Bootstrap modal are unresponsive

I am having difficulty aligning text horizontally within a <div> element using a combination of <div>, <a>, and <p> tags

The reliability of jQuery posting varies

Despite setting the overflow-y property, the website continues to scroll

How can I resize my image to match the dimensions of the navigation bar?

Assistance required for JavaScript with Image and Hyperlinks