Is there a way to properly position an element in line with the element directly above it using html, css, and

I need help with aligning two 

<input type="text">
boxes on my form. Currently, I have a dropdown button and one text input in one row, and another text input in the second row (refer to the screenshot below). How can I ensure that the "Choice 2" box is positioned right below the "Choice 1" box for better alignment? Thank you.

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

This is the HTML code I am currently using:

<div class="container">
<div class="dropdown">
      <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        2
        <span class="caret"></span>
      </button>
      <ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
      </ul>
      <input type="text" name="" value="" placeholder="Choice 1"> <br>
</div>
<div class="container">
<input type="text" name="" value="" placeholder="Choice 2">
    </div></div>

Here is the CSS style associated with it:

.container {padding: 1% 20%;
  margin: auto;
  text-align: center;}

body {
  background-color: #b6e6bd;
  line-height: 1.6;
}

Can anyone provide guidance on how to accurately stack the "Choice 1" and "Choice 2" boxes, both represented by 

<input type="text">
, directly above and below each other? Any assistance would be greatly appreciated. Thank you.

javascripthtmlcssbootstrap-4

Answer №1

Perhaps there's a chance to make some minor modifications to the HTML code?

Here is my attempt. I have consolidated two input[text] elements into one div, and placed the dropdown in another section. Additionally, I replaced the .container class with flex@center (although other layouts like table or div with specific widths can also be used).

.container {
  padding: 1% 20%;
  margin: auto;
  text-align: center;
  display: flex;
  justify-content: center;
}

body {
  background-color: #b6e6bd;
  line-height: 1.6;
}

.container-inner {
  margin-left: 10px;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfbfa0bfbfaabde1a5bc8ffee1fef9e1fe">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="dropdown">
    <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        2
        <span class="caret"></span>
      </button>
    <ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
    </ul>
  </div>
  <div class="container-inner">
    <input type="text" name="" value="" placeholder="Choice 1"> <br>
    <input type="text" name="" value="" placeholder="Choice 2">
  </div>
</div>

Answer №2

If you're looking for an efficient solution, consider utilizing a framework such as Bootstrap. However, if that's not feasible, I recommend modifying your code to the following:

.container {
    padding: 1% 20%;
    margin: auto;
    text-align: center;}

body {
    background-color: #b6e6bd;
    line-height: 1.6;
}
<div class="container">
    <div class="dropdown">
        <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true>
            2
            <span class="caret"></span>
        </button>
        <select id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
            <option><a href="#">2</a></option>
            <option><a href="#">3</a></option>
            <option><a href="#">4</a></option>
        </select>
        <input type="text" name="" value="" placeholder="Choice 1"> <br>
    </div>
    <div class="container">
        <input type="text" name="" value="" placeholder="Choice 2" style="margin-right: -64px;">
    </div>
</div>

Hopefully, this adjustment proves to be beneficial for your needs.

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

What could be causing appendChild to malfunction?

I'm having an issue trying to create three elements (parent and one child) where the third element, an <a> tag, is not appending to modalChild even though it's being created correctly. modal = document.createElem ...

javascripthtmlcss

Exploring the possibilities of page manipulation using React Native WebView

I'm encountering an issue with my implementation of react-native-webview. When I use it to open a webpage, the audio doesn't start playing automatically. Instead, I have to press a button for it to play. Is there a way to make the audio play dire ...

javascriptreactjsreact-native

The second picture in the slider transitions smoothly into view over the visible area of the first image

My image slider is based on jQuery but I'm facing a problem. When the page loads or reloads, the second image of the slider appears in the visible area overlapping the first image like this: https://i.sstatic.net/osbfb.png However, if I click the ar ...

jqueryhtmlcssbootstrap-4

"What is the best way to retrieve the value of a div element with jquery

Attempting to retrieve the value of a div using jQuery in Chrome console from this HTML: <div class="col-md-3"> <div class="vou-col" style="cursor: pointer"> <h4>Free Large Bucket</h4> <span class="sku-info">Voucher ...

javascriptjqueryhtml

Creating a flexible grid layout with DIVs that share equal width dimensions

Struggling with my HTML and CSS code, I need a way to structure nested DIV blocks into a responsive grid where each block has the same width. Despite my efforts, nothing seems to work as expected. Currently, the nested DIVs are stacked vertically one on to ...

htmlcss

Strange spacing below body element discovered while browsing website in Firefox 7

Currently, I am facing an issue on my website in Firefox 7. A margin is causing the gradient in #wrapper to shift upwards from the bottom, disrupting the layout. Despite resetting the margin to 0 on body and html, I am unable to pinpoint the root of the pr ...

htmlcssfirefox7

Tips for removing the Y-Axis entirely from a CanavasJS chart

I'm working with a canvasJS chart and my goal is to completely hide the Y-Axis. I've managed to remove the Y-Axis line and title in this JSFiddle example. I came across these properties to hide the Y-Axis title and line, but I'm struggling t ...

javascripthtmltypescriptjsfiddlecanvasjs

Loading an OBJ file from a blob using three.js

I am currently attempting to load an OBJ file from a blob using Three.js. After referring to this resource and successfully loading STL files, I encountered an issue with loading OBJ files. The error message I received is as follows: TypeError: text.indexO ...

javascriptthree.jsblobarraybuffer

Symfony2's W3C XHTML validation fails when validating form submissions according to the W3C standards

Having an issue with valid w3.org XHTML - the validator is showing an error on the required attribute of an input: The attribute "required" is not recognized. I firmly believe that this attribute is necessary, as it is included by Symfony2 form builder f ...

formshtmlvalidationxhtmlsymfony

Troubleshooting handlebars path problem in Express.JS

https://i.sstatic.net/qEB42.jpg I have my node's logic stored in the "app" folder, where the views folder resides with templates for handlebars (express-handlebars). Inside the "config" folder, there's an express.js file where I require the exp ...

javascriptnode.jsexpresspathhandlebars.js

Prevent the tab key from exiting the input field and instead direct it to a designated element on the webpage

I have customized a select menu for user interaction, but I am facing issues with normal keyboard behaviors not working as expected. Specifically, I want to enable tab functionality to navigate to my styled select menu just like when clicking tab to cycle ...

jqueryhtmlcssjquery-ui

The clickable area for the radio button cursor is too large

As I embark on my journey with HTML and CSS, I have encountered two issues while creating a form: The spacing between the question and answers is too wide. The second picture depicts how I would like it to appear. The cursor:pointer seems to be extending ...

htmlcss

When the child content surpasses the height of the parent, you can scroll within an overflow:visible; div

My sidebar navigation menu includes children and sub-children that are revealed on hover. You can view a simplified version of it in this jsfiddle link: https://jsfiddle.net/s096zfpd/ Although the example provided is basic, my main concern arises when the ...

javascriptjqueryhtmlcss

Is there a way to align my text to the right of an image?

My current code is displaying an image https://i.sstatic.net/Nmnr6.jpg I want it to show a different image instead: https://i.sstatic.net/MH7sR.jpg This is the HTML code I'm using: </div> <div class= "Row1"> <h2>Looking ...

htmlcss

adjusting the width of an HTML table cell

I'm struggling with the code below: <table> <thead> <th class='1'>Date</th> <th class='2'>Start Time</th> <th class='3'>End Time </th> <th class='4 ...

htmlcss

I'm searching for the HTML5 specifications and information on which browsers support specific features. Can you point me in the right direction

Where can I locate the HTML5 specifications for Internet Explorer, Opera, Firefox, and Google Chrome browsers? ...

htmlbrowser

Is there a way to change the name within an array of objects?

let myArray = [ { age: 21 }, { name: 'Sara' }, { test01: 'bla' }, { test02: 'bla' } ]; I have an array of objects and I need to update only the "name" property. How should I go about it? This is the desired outcome: ...

javascriptarrays

There was an error: "TypeError: Unable to access the equipmentImage property of

Help needed! I am encountering a strange error while trying to upload an equipment image from postman as form data. The error states: Type Error; Cannot read property equipmentImage. I am using express-fileupload for the image upload process. Can someone ...

javascriptnode.jsexpresspostman

Use JavaScript to swap out various HTML content in order to translate the page

I am currently facing a challenge with my multilingual WordPress website that utilizes ACF-Field. Unfortunately, WPML is not able to translate the field at the moment (2nd-level-support is looking into it). As a solution, I have been considering using Java ...

javascriptphphtmlwordpressadvanced-custom-fields

A step-by-step guide on crafting a triangular-shaped div connected to another div

After working with HTML elements and trying to incorporate 2 divs, I realized that I couldn't achieve the triangle-shaped div that I actually needed. I have included an image for reference. Below is the HTML code snippet: <div style="background-c ...

htmlcss