Position the final offspring adjacent to the one that came before it using Flexbox

I am trying to figure out how to position the last child (CVV) next to the previous one (Expiry), so they are on the same row:

.form-col-1--cc {
  display: flex;
  flex: 30%;
  flex-direction: column;
  text-align: right;
  align-items: flex-end;
}
<div class="form-col-1--cc">
  <input matInput required class="example-full-width" name="number" card-number>
  <input required name="first-name" card-name matInput>
  <input matInput required name="expiry" card-expiry placeholder="Expiry">
  <input matInput required name="cvv" card-cvc placeholder="CVV">
</div>

htmlcssflexbox

Answer №1

To better organize your inputs, simply nest them within another div element as shown below:

.form-col-1--cc {
  display: flex;
  flex: 30%;
  flex-direction: column;
  text-align: right;
  align-items: flex-end;
}
<div class="form-col-1--cc">              
  <input matInput required class="example-full-width" name="number" card-number>
  <input type="text" required name="first-name" card-name matInput>
  <div>
    <input matInput required type="text" name="expiry" card-expiry placeholder="Expiry">
    <input matInput required type="text" name="cvc" card-cvc placeholder="CVV">
  </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

The value of "asp-route-id" is dynamically determined through the use of

Hey there, I’m looking to dynamically pass a value from "codeDrink" to my controller using "asp-route-id" and Ajax in my ASP.NET MVC project. This is how I am handling it in my view: <p> <a id="deleteLink" asp-action="Delete& ...

javascripthtmlasp.netajax

The vertical-align property fails to properly align the list-style-image with the text

My HTML list is structured like this: <ul id="remove"> <li id="rm_txt_1" onClick="remove_1();">Remove </li> </ul> <ul id="move"> <li id="mv_txt_1" onClick="position();">Move Down</li> </ul> It is styled u ...

htmlcss

Retrieve the information from the API and populate the tables with the data

I'm currently working on fetching API data and displaying it in tables, using mock data for now. Successfully implemented actions and reducers. Managed to call the API but encountered an issue with network calls where I see a blocked response content ...

javascripthtmlreactjsreduxmaterial-ui

Limiting the style of an input element

How can I mask the input field within an <input type="text" /> tag to restrict the user to a specific format of [].[], with any number of characters allowed between the brackets? For example: "[Analysis].[Analysis]" or another instance: "[Analysi ...

javascriptjqueryhtml

Selenium Mouse/Pointer Display

Is there a way to visualize the selenium mouse movements during test execution? Can we display a windows cursor image or any kind of indicator like a dot or crosshair? I am currently working on implementing a drag and drop feature using Selenium and Java ...

javahtmltestingselenium

Extract the content from the span element on Whatsapp Web

Currently, I am in the process of learning Python along with Selenium and have encountered a challenge. I am attempting to extract the username from the most recent message in a WhatsApp group conversation. Despite several attempts, I have been unsuccessfu ...

pythonhtmlcssseleniumselenium-webdriver

How to effectively implement light and dark themes using SCSS colors?

Currently, I am utilizing Vue.js and SCSS along with PrimeVue and Element plus, where I am importing their variables. My objective is to dynamically change the theme color. In my dark-variables.scss file, I have defined various color variables for differe ...

cssvue.jssassthemeselement-plus

Web pages that dynamically update without the need for reloading

Recently, I stumbled upon slack.com and was immediately captivated by its user interface. For those unfamiliar with it, navigating the site is quite simple: There's a sidebar on the left and a main content area on the right. When you click on an item ...

javascripthtmlcssnode.jsmeteor

Enhance the dimensions of images on Tumblr

Is there a way to customize the width of a photo in HTML? I am having trouble changing the size of a photo set on Tumblr to be larger. I have tried researching it, but I don't understand where to place maxwidth:600px or if this is even the correct app ...

htmlimagephototumblrcss

MaxwidthLG in Material UI design

Hi there, I've encountered an issue with Material UI CSS. Even after attempting to override it, the desired effect is still not achieved. My goal is for the entire div to occupy the full page but this is the current result: https://i.stack.imgur.com/b ...

cssmaterial-uimaterial-design

What is the best way to include overflow-hidden in the image displayed by the tailblock component?

I have implemented the following Tailblock component, which is built on tailwind.css. My goal is to achieve a hover effect where the image scales up within its original dimensions. I want the image to zoom in without changing its height and width. I atte ...

htmlcsstailwind-csstailwind-ui

Stylish dropdown menu design inspired by W3CSS website

I recently implemented a CSS dropdown menu example that I found on a website, but it's not working with my code. I double-checked for typos but couldn't find any. Even when I tried to directly copy the code and replace the content with my own, i ...

htmlcssdropdown

Positioning the horizontal menu and footer links to the right side of the page

Struggling to get my menu and footer links aligned all the way to the right of the page. Here's what it currently looks like http://prntscr.com/32snbr, and this is the desired alignment http://prntscr.com/32snrm I've shared the HTML code below, ...

csshtmlhtml-listsfooter

Keep rolling the dice until you hit the target number

Currently, I am in the process of learning JavaScript and one of my projects involves creating a webpage that features two dice images, an input box, and a button. The objective is for users to input a value, click the button, and then see how many rolls i ...

javascriptjqueryhtml

Updating a string's value in Angular based on user input

I am currently developing a custom offer letter template that will dynamically update key data points such as Name, Address, Role, Salary, etc based on the selected candidate from a list. The dynamic data points will be enclosed within <<>> in ...

javascripthtmlangulartypescriptdynamic-data

Having difficulty with the placement of a div element in HTML code, wondering how to position it according to my specific

As a beginner, I ran into some trouble with my code while trying to create a simple 'game' for fun. The initial result looked like this. After that, I attempted to add another div onto the brown element using the following CSS: #energy_and_coins ...

htmlcsspositioning

The function of page-break-after: always is not functioning correctly

I want the Div with class questions_visual to appear on the second page when printing. <html> <head> <title>quiz</title> <link rel="stylesheet" href="style.css"> </head> <body> < ...

htmlcssmedia-queries

Is there a way to make text fade in and out smoothly instead of abruptly disappearing and reappearing after an animation ends?

I'm seeking a unique animation effect for my right-to-left scrolling text. Instead of the text teleporting back to its origin at the end of the animation, I would like it to smoothly disappear and reappear from the margins. .custom-animation { he ...

htmlcsscss-animations

Is it illegal to escape quotes when using an image source attribute and onerror event in HTML: `<img src="x" onerror="alert("hello")" />`?

Experimenting with escape characters has been a fascinating experience for me. <img src="x" onerror=alert('hello'); /> <img src="x" onerror="alert(\"hello\")" /> The second code snippet triggers an illegal character error ...

javascripthtml

Using AJAX to submit a form and retrieve response data in Javascript

After successfully getting everything to post correctly, I encountered a problem with this script. It keeps loading the content into a new page. Could it be related to the way my php file returns it using "echo(json_encode($return_receipt));"? <s ...

javascriptphphtmlajaxjson