Make sure that the input field and label are aligned side by side in the

Is there a way to arrange the following HTML in the specified layout?

<div>
    <div>
        <label>Counterparty</label>
        <input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true"  />
    </div>
    <div>
        <label>Value Date</label>
        <input id="paymentsApp-inpt-date" ng-model="selectedPaymentCopy.valueDate" />
    </div>
    <div>
        <label>Credit Account</label>
        <input id="paymentsApp-inpt-acc" ng-model="selectedPaymentCopy.creditAccount" />
    </div>
    <div>
        <label>Amount</label>
        <input id="paymentsApp-inpt-amt" ng-model="selectedPaymentCopy.amount" />
    </div>
</div>

I am not using bootstrap for this project. Could someone guide me on the CSS needed to achieve this look?

https://i.stack.imgur.com/JspVG.png

htmlcss

Answer №1

Technique #1: Flexbox:

div > div {
    display: flex;
}

div > div > label {
    flex-basis: 125px;
}

div > div > input {
    flex: 1;
}

DEMO

Method #2: Using display: inline-block:

div > div > label {
    display: inline-block;
    width: 125px;
}

div > div > input {
    display: inline-block; /* optional */
}

DEMO

Keep in mind that while flexbox is widely supported, some older browsers like IE 8 & 9 may not fully support it. Certain browsers like Safari 8 and IE10 may require vendor prefixes for flexbox. To easily add the necessary prefixes, you can use a tool like Autoprefixer.

Answer №2

Although flex is a reliable choice and I often use it effectively, there are subtle issues that may arise if you are not fully acquainted with its behavior.

If you prefer a simpler alternative, consider floating the inputs to the right. In this case, place the input before the label and keep the label as is.

Here are the styles (slightly verbose for clarity, with a fixed width set for the container):

.test {
    width: 400px;
}
.test > div > input {
    float: right;
}

Markup (note the switched position of input and label):

<div class="test">
    <div>
        <input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true"  />
        <label>Counterparty</label>
    </div>
    <div>
        <input id="paymentsApp-inpt-date" ng-model="selectedPaymentCopy.valueDate" />
        <label>Value Date</label>
    </div>
    <div>
        <input id="paymentsApp-inpt-acc" ng-model="selectedPaymentCopy.creditAccount" />
        <label>Credit Account</label>
    </div>
    <div>
        <input id="paymentsApp-inpt-amt" ng-model="selectedPaymentCopy.amount" />
        <label>Amount</label>
    </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

Adding additional images to the left side of the slide

My goal is to display multiple images in two rows. The alignment works well for up to 9 images, but beyond that, the additional images appear on a third row instead of staying within the two rows. I want to ensure they are contained within 2 rows only. How ...

htmlcss

Chrome Automatically Playing WebRTC Audio

My webapp has webrtc functionality, but I've noticed a strange issue. When connections are established between Chrome browsers, the audio is not played, while video is. However, this problem doesn't occur with Mozilla users. So... Chrome user 1 ...

javascripthtmlgoogle-chromewebrtc

Breaking the layout using recursive components in VueJS

I am currently facing an issue where I need to dynamically load components. However, when some of these components are loaded, they appear with faulty or missing CSS styles due to a problematic first div element after the template. Removing this DIV manual ...

htmlcssvue.jsvue-component

Dynamically adjusting CSS Max-Height according to scroll position

Is there a CSS only technique to achieve the following scenario: An element is positioned absolutely at x,y coordinates on the screen. The document includes a vertical scrollbar depending on its content. Can the height of the element be adjusted based on ...

htmlcss

"Creating a link to a button with the type of 'submit' in HTML - a step-by-step

Found the solution on this interesting page: In a list, there's a button: <form> <ul> <li> <a href="account.html" class="button"> <button type="submit">Submit</button> ...

htmlcss

Issue with jQuery: Changes are not being triggered and clicks are also not working

I managed to recreate the modifications of my complex script in a simple jsfiddle, which can be found here. Below is the code I am working with locally: HTML <input type="text" id="rangeStart" value="updateMe" /><br/> <input type="text" c ...

javascriptjqueryhtmlclick

What is the best way to determine the height of a DIV element set to "auto"?

When setting a fixed height on a div using jQuery, such as $('div').height(200);, the value of $('div').height() will always be 200. This remains true even if the content within the div exceeds that height and overflow is hidden. Is th ...

javascriptjquerycssheight

Bringing in Sequentially Arranged HTML Content using Asynchronous JavaScript Integration

I have a collection of separate HTML files with small content snippets that are loaded through AJAX and .get(). I want to display the content in an orderly fashion without relying on async: false in my AJAX call, as it is no longer recommended. With the si ...

jqueryhtmlajaxsynchronous

Adding multiple text as label and sublabel in a React MUI Tooltip can be achieved by utilizing the appropriate

I'm struggling to incorporate a MaterialUI Tooltip into my React application with two separate text lines. The first line should serve as the main title, while the second line functions as a sublabel. In this screenshot provided, you can see where I ...

javascriptcssreactjs

I cannot locate the dropdown list anywhere

As a beginner in html and css, I decided to follow a tutorial on youtube. The tutorial focuses on creating a navigation bar with dropdown menus using html and css. I wanted the names Ria, Kezia, and Gelia to be displayed when hovering my mouse over the Su ...

htmlcss

Angular's input event fails to trigger for dynamically generated fields when pasted into them

When working with a form that has dynamically generated input fields, I encountered an issue. I needed to display a preview of the input contents on a div while pasting content into the fields. This project is built using Angular 11. Below is my .ts file: ...

htmlangular

To determine whether a variable is an integer in PHP

Is there a more elegant solution to this problem? if( $_POST['id'] != (integer)$_POST['id'] ) echo 'not an integer'; I attempted if( !is_int($_POST['id']) ) However, I encountered issues with is_int(). This ...

phphtmlvalidation

Adjust the dimensions of input tag depending on the length of content in Angular

Is there a way to dynamically set the size of the input tag in my HTML based on the length of the ng-model value? I attempted this approach: <span>Node Path: <input for="nodeName" type="text" ng-model="nodePath" size="{{nodePath.length()}}"ng- ...

javascripthtmlcssangularjs

Obtain data from a single module and incorporate it into a different one

In my Angular 2 application, I am dealing with two component files - home.ts and folder-selector.ts. Within the folder-selector.ts file, there is a variable named pathToNode. I am trying to figure out how to access this value from within the home.ts file ...

javascripthtmlangulartypescript

How can we enhance the integration of HTML and PHP for a smoother workflow?

Are there alternative solutions, aside from using a template engine like Smarty, for managing large code like this? <table class="table table-striped dataTable table-bordered"> <thead> <tr> <?php $o ...

phphtml

I am unable to determine if I have already selected a List Item

My goal is to have a functionality where clicking on "Download Drivers" will open the list, and clicking again will close it. This should be achieved with onclick events only, no hover effects. Additionally, I want the list to remain open even if I click o ...

javascripthtmlcss

Comparing attribute selectors to class selectors in the realm of styling

I often come across code that looks like this: <input type="text" class="class1" name="text"> <input type="submit" class="class2" name="submit"> which is then styled as follows: input[type=text] { styles here...} input[type=submit] { sty ...

cssclassattributescss-selectors

Image floating to the left and right sides within a group, with the text vertically aligned in the middle of a div of unspecified height

Can text be vertically aligned in the middle of a div with an unknown height when there is a floated image present? Specifically, for the first and third div group of 'groupsection2', the image will float to the left; and for the second and fourt ...

htmlcss

Enable the ability to scroll and click to navigate an overlapping Div element

A customer has a website with a dark teal design and is not pleased with the appearance of the scroll bar, as it disrupts the overall style. The client requested that I find a solution without using third-party libraries, and one that they can easily under ...

javascripthtmlcss

Drag a spinning cube using CSS and Jquery when the mouse is pressed

I'm attempting to develop a dynamic rotating cube that users can manipulate to their desired side by clicking and dragging on the cube. Currently, I have functionality where the cube moves as the mouse cursor moves across the screen, but this results ...

jquerycsscss-transforms