Reasons for aligning inline elements with input boxes

I am facing a challenge with aligning a series of inline elements, each containing an input text box, within a single row. The number and labels of these input boxes can vary as they are dynamically loaded via AJAX.

The width of the div housing these inline elements is dynamic, depending on the surrounding content. In the scenario depicted in the image linked below, I am struggling to ensure that the input boxes expand equally to justify the content on both sides. Is there a CSS-only solution for this issue?

https://i.sstatic.net/uK8h0.png

.dynamicWidth {
  background-color: green;
  height: 400px;
  position: absolute;
}
<div class="dynamicWidth">
  <div>
    <select>
      <option>This could be longer or shorter dependending on what is dynamically loaded</option>
    </select>
  </div>
  <hr>
  <div>
    <span>Length</span>
    <input type="text" placeholder="length"><span> x Width</span>
    <input type="text" placeholder="width"><span> x Height</span>
    <input type="text" placeholder="height">
  </div>
</div>

javascripthtmlcss

Answer №1

To achieve this layout, utilize flexbox's justify-content property with the value set to space-around on the container div that holds the input elements.

.dynamicWidth {
  background-color: green;
  width: 100%;
  height: 400px;
  position: absolute;
}

.dynamicWidth div:nth-of-type(2) {
  display: flex;
  justify-content: space-around;
}
<div class="dynamicWidth">
  <div>
    <select>
      <option>This could be longer or shorter depending on what is dynamically loaded</option>
    </select>
  </div>
  <hr>
  <div>
    <span>Length</span>
    <input type="text" placeholder="length"><span> x Width</span>
    <input type="text" placeholder="width"><span> x Height</span>
    <input type="text" placeholder="height">
  </div>
</div>

If you need to support older browsers that do not have flexbox support, another option is to wrap each label and input in their own individual div elements. Set the parent container of those divs to have a display of table, and set the input divs to have a display of table-cell with widths of 33.3% (1/3).

.dynamicWidth {
  background-color: green;
  width: 100%;
  height: 400px;
  position: absolute;
}

.dynamicWidth div:nth-of-type(2) {
  display: table;
  width: 100%;
}

.input-container {
  width: 33.3%;
  display: table-cell;
}
<div class="dynamicWidth">
  <div>
    <select>
      <option>This could be longer or shorter depending on what is dynamically loaded</option>
    </select>
  </div>
  <hr>
  <div>
    <div class="input-container">
      <span>Length</span>
      <input type="text" placeholder="length">
    </div>
    
    <div class="input-container">
      <span> x Width</span>  
      <input type="text" placeholder="width">
    </div>
    
    <div class="input-container">
      <span> x Height</span>
      <input type="text" placeholder="height">
    </div>
  </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

Maintaining the dropdown in the open position after choosing a dropdown item

The dropdown menu in use is from a bootstrap framework. See the code snippet below: <li id="changethis" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown>LINK</a> <ul class="dropdown-menu"> <li id ...

javascriptjqueryhtmltwitter-bootstrap

Tips for repairing a button on an image backdrop and ensuring its position remains unchanged during resizing

My goal is to add tags to people's faces on my website. While I am aware of the image map property, I am facing an issue where the background of the main Div needs to be set to 'cover'. However, when the window is resized, the coordinates of ...

jqueryhtmlcsstagsimagemap

Component with Next.JS Server-Side Rendering

Is it possible to integrate a module into my project that only supports server side rendering? Here is the current project structure: index.js view.js part.js (Class component) Currently, I am able to use the module in the getServerSideProps method in ...

javascriptreactjsnext.jsserver-side-renderingreact-component

The random sorting algorithm in the query_posts function is disrupting the formatting of the CSS

<?php query_posts($query_string . '&orderby=rand') ?> Hello everyone, I recently added the code snippet above to my portfolio page template.php. You can view it at However, I've noticed that sometimes the CSS breaks when you rel ...

phpcsswordpressrandomsql-order-by

Updating form values when a radio button is changed using asynchronous JavaScript and XML (AJ

Here is the form I have created: <form method="post" action="options.php" id="pay_what_you_want_form"> <input type="radio" name="payment_period" value="monthly" id="monthly" checked><label for="monthly" class="payment_period_label"> ...

javascriptjqueryajaxformsradio-button

Modify the variable for each VU in K6 (refresh token)

When I start my K6 test, I utilize my setup() function to obtain a token that will be used by every VU. I want each VU to have the same token, rather than generating individual tokens for each one. Although this works fine initially, the challenge arises ...

javascriptperformancetestinggrafanak6

What could be causing the Bootstrap navbar to not toggle when the button is clicked?

Attempting to create a website featuring a collapsible navbar, but encountering some issues. The button is properly identified with the correct ID assigned. Jquery and bootstrap have been included in the necessary order at the bottom of the body. However, ...

htmlcssbootstrap-4

JavaScript: specify parameters for function inputs

I'm curious about optimizing Javascript/Typescript functions arguments for clean code. To demonstrate, let's consider a basic example. Imagine I have a React component with a view property as props: <Grid view="Horizontal" /> ty ...

javascriptreactjstypescriptfunction

Utilizing Semantic-UI-React and Webpack to Set the Path for an Image

I am currently developing a ReactJS application using webpack. This basic example is supposed to display an <img> tag with a specified URL in the src attribute. How can I bundle the image resource using webpack and process it with the appropriate l ...

javascriptreactjswebpackbabeljssemantic-ui-react

A guide on rotating loaders and inserting custom text within loaders using CSS

Seeking assistance to modify my code for creating a unique loader design. The inner loader needs to remain static with only top and bottom segments, while the middle loader rotates anti-clockwise and the outer loader rotates clockwise. Additionally, the ...

htmlcss

Troubleshooting issues with JSON compatibility within the OnChange event

Initially, I wrote this code to retrieve a single data point. However, I realized that I needed more fields returned when the drop-down select menu triggered an onchange event. So, I switched to using JSON, but now it's not returning any data. The dro ...

javascriptphpjqueryajaxjson

Creating a sticky footer using Vue.js for both mobile and desktop display views

Looking for a solution to create a sticky footer that works on both desktop and mobile views without overlapping the main content? The current code either overlaps or doesn't stick to the bottom. Seeking a responsive approach. App.vue: <template& ...

htmlcssvue.jsfooter

Utilize VBA in Excel to interact with a jQuery button on a web page

Can anyone provide assistance with my VBA Excel code issue? Set ieDoc = Nothing Set ieDoc = ieApp.Document For Each Anchor In ieDoc.getElementsByTagName("div") If InStr(Anchor.outerHTML, "CategoryIDName-popup") > 0 Then ...

jqueryexcelhtmlvba

Tailwind's unique approach to custom @font-faces allows for

Recently, I've been working on a project with Tailwind CSS. I encountered an issue when trying to implement a custom font using @font-face. Despite placing the font file in public/assets/font directory, it still doesn't seem to load properly. Her ...

htmlcssfont-facecustom-font

jQuery Files in Conflict

The issue I am facing involves the code below. The first function requires linked js and css, while the second one needs a jQuery and javascript file inherited from base.html. However, there seems to be a conflict in loading these files (possibly because o ...

javascriptjqueryhtmldjango

The state is not being configured accurately

In my ReactJs project, I have a model Component with a picture that is displayed. I want to pass the data of the clicked picture, which can be neither raw data nor a URL. I have implemented a handler that can delete the picture (if pressed with the Ctrl k ...

javascriptreactjs

Fade in text effect using jQuery on a Mac computer

Trying to create a smooth text fading effect across different browsers using jQuery. In the example below, you may notice that during the last part of the animation when the text fades in, the font weight suddenly increases causing a jerky/clunky appearan ...

javascriptjquerycss

Error encountered in clientside js file: Node.js indicates that 'require' is not defined

In my JavaScript file, I have important data that needs to be saved into a Mongoose schema and then inserted into a MongoDB table. The schema is stored in a separate directory, so I attempted to import it by adding the following line at the beginning of th ...

javascriptnode.jsnpmbrowserifyrequire

Difficulty encountered in getting html email signature to appear correctly on Outlook

I have developed a personalized email signature using HTML. Here's the unique code: <html> <!-- Insert your company logo here --> <div id="far_left" style="width: 50px; height: 50px; float: left; ...

htmlcssoutlook-2010email-clientsignatures

How can a SESSION be initiated through the selection of a radio button in PHP?

On my website, I have a Form where users can choose the color of a car. I want to make it so that when a user selects a radio button, it updates a session variable dynamically using Ajax and PHP. Here is the HTML Form: <form method="post"> red: &l ...

phpjavascriptajaxsession