Password confirmation on the login screen will be displayed in a single line

As someone who is relatively new to HTML/CSS, most of what I have learned has come from this platform or by searching for answers online. I am nearing completion of my assignment, but I am struggling to figure out how to display two label words on the same line. https://i.stack.imgur.com/TRdxs.png

[<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {background-color: black;}
div {}
label {display:inline-block;width:235px;margin-left: 20px; margin-top: 20px; font-size: 25px; font-family: Calibre; color: white; text-align: left;}
input  {margin-top: 20px; margin-right: 20px;padding: 12px 20px;}
#main {border: 5px solid white; width: 600px; height: 400px;}
button {margin-left: 320px; margin-top: 20px; margin-bottom: 20px; background-color:#00BB00; width:120px; height: 40px;
color: white;
font-size: 20px;
border-radius: 46px; 
-moz-border-radius: 46px; 
-webkit-border-radius: 46px; 
border: 0px solid #800000;
font-family: Calibre}
</style>
</head>
<body>
<div id="main">
<form action="/web.engineering" method="post">
    <div>
    <label>Username:</label>
    <input type="text"placeholder="Username" name="username" required>
    </div>
    <div>
    <label>First name:</label>
    <input type="text" placeholder="First name" name="firstname" required>
    </div>
    <div>
    <label>Last name:</label>
    <input type="text" placeholder="Last name" name="lastname" required>
    </div>
    <div>
    <label>Password:</label>
    <input type="password" placeholder="Enter password" name="password" required>
    </div>
    <div>
    <label>Passwordconfirmation:</label>
    <input type="password" placeholder="Re-enter password" name="Repeat password" required>
    </div>
    <div>
    <button type="submit" ><b>Register</b></button>
    </div>
</form>

</div>

</body>
</html>][1]

This is the code I currently have and the image represents what I am trying to achieve. Can anyone guide me on how to display "Password confirmation" on the same line as the text box? Thanks in advance.

Answer №1

Start by adjusting the font-size based on the available space within the container div. Then, implement display: flex; along with flex-basis: 230px;.

body {
  background-color: black;
}

div {}

#main form>div {
  display: flex;
}

label {
  flex-basis: 230px;
  margin-left: 20px;
  margin-top: 20px;
  font-size: 23px;
  font-family: Calibre;
  color: white;
  text-align: left;
}

input {
  margin-top: 20px;
  margin-right: 20px;
  padding: 12px 20px;
}

#main {
  border: 5px solid white;
  width: 600px;
  height: 400px;
}

button {
  margin-left: 320px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #00BB00;
  width: 120px;
  height: 40px;
  color: white;
  font-size: 20px;
  border-radius: 46px;
  -moz-border-radius: 46px;
  -webkit-border-radius: 46px;
  border: 0px solid #800000;
  font-family: Calibre
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>

  </style>
</head>

<body>
  <div id="main">
    <form action="/web.engineering" method="post">
      <div>
        <label>Username:</label>
        <input type="text" placeholder="Username" name="username" required>
      </div>
      <div>
        <label>First name:</label>
        <input type="text" placeholder="First name" name="firstname" required>
      </div>
      <div>
        <label>Last name:</label>
        <input type="text" placeholder="Last name" name="lastname" required>
      </div>
      <div>
        <label>Password:</label>
        <input type="password" placeholder="Enter password" name="password" required>
      </div>
      <div>
        <label>Password confirmation:</label>
        <input type="password" placeholder="Re-enter password" name="Repeat password" required>
      </div>
      <div>
        <button type="submit"><b>Register</b></button>
      </div>
    </form>

  </div>

</body>

</html>]

Give this a try and see if it meets your requirements!

Answer №2

To ensure the labels fit within a fixed width of 235px, consider adjusting either the font size or the width itself. Increasing the width to 240px kept the words on the same row, as did decreasing the font size to 24px.

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

Adjust item size and move them into the panel

I am looking to create a panel that arranges items in a specific layout shown here: https://i.stack.imgur.com/qw3lS.png Below is the code I have attempted so far: import React, { useCallback, useEffect } from "react"; import { Box, Grid, Tab, T ...

Angular is known to raise the error ExpressionChangedAfterItHasBeenCheckedError

I am currently developing an Angular application using Angular version 7.0.4. My objective is to automatically set focus on the first input element of a modal if the list of working times contains more than one element. However, I am facing an issue where ...

What is the best way to insert a space between the radio buttons in a RadioButtonList and the accompanying text?

After researching various solutions, none have seemed to work for me. In my ASPX page, I am utilizing Bootstrap to showcase a RadioButtonList with options for "Yes" and "No" like this: <div class="form-group my-3"> <label class=" ...

When adding text to a React Material UI Box, it can sometimes extend beyond the boundaries

I'm currently working on a straightforward React page, but I've encountered an issue right from the start: my text is overflowing the box and I can't figure out why. Could someone take a look at my styles? Here's a picture showing the ...

Attempting to vertically center text within a percentage div

I'm trying to create a button that is centered on the screen with text aligned vertically within the button. I want to achieve this using CSS only and restrict the usage of percentages only. Here's what I have so far: Check out my code snippet h ...

What is the best way to create a container filled with numerical figures?

If I have the number 445758, and I want each of these numbers to be displayed in their own box like this: Can you explain how to achieve this? ...

Switch webpage HTML content to XLS format

Hey folks, I'm a bit uncertain about my client's requirements but thought sparking a conversation might help. My client is looking to extract HTML data from a webpage and convert it into an XLS format. The content is all sourced from their own w ...

Monochrome tabletop solid in one hue

I'm trying to eliminate the space between the columns in my table so it looks solid. Here's the CSS style I've been using: <style> tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:90%;background:transparent;} table{ margin: ...

particular shade for button border and background

I'm looking to create a button using Material UI that has a specific design. Right now, I've only been able to achieve this: https://i.stack.imgur.com/xvv7s.png Here is the code I am currently using. If anyone can help me identify what I'm ...

What is the mechanism behind image pasting in Firefox's imgur integration?

Start by launching an image editing software and make a copy of any desired image. Avoid copying directly from a web browser as I will explain the reason later on. Navigate to "http://imgur.com" using Firefox. To paste the copied image, simply press Ctrl+V ...

Placing emphasis on a link's destination

Is there a way to automatically focus on an input field after clicking on a local href link? For example, I have the following: <a href="#bottom"> Sign up </a> And at the bottom of the page : <div id="bottom"> <input type="email" nam ...

Creating a smooth sliding textarea in HTML

I am working on creating an HTML table with numerous text input areas (textarea) that expand downwards when clicked. Currently, the textarea element expands properly but disrupts the layout of the table. My goal is to achieve a design like this Instead o ...

Distribute progress bar evenly around a circular path

I am working on a component in ReactJS that involves a circle in the center displaying the average (rendered as a div element), with 12 progress bars aligned around it at equal angles. To achieve this, I am utilizing React Bootstrap ProgressBar. <Progr ...

Header of table remains fixed as user scrolls through data, allowing for easy reference. The left

Above, I have utilized some code from another answer here to display a table. However, I am now contemplating the possibility of customizing it so that the first column remains fixed for horizontal scrolling. Currently, I'm employing the following as ...

Exploring Bootstrap 4: Creating list-inline elements for various screen sizes

Is there a way to align list items on top of each other for a breakpoint <=575px (xs), and align the items next to each other for a breakpoint >575px (sm) using Bootstrap display properties? I found some information on How to display a list inline u ...

Angular17+ introduces a new feature called the Dynamic Tag Class, providing

Why isn't my navigation bar updating when the page changes? Here is my app.component.html code: <html> <app-navbar></app-navbar> <router-outlet></router-outlet> </html> This is where my navbar.component.html s ...

Create a unique SVG path by eliminating any overlapping shapes directly within the code

I have an SVG image representing the Switzerland flag, with a cross made of two overlapping rectangle paths. I need to make it look more like the real flag by removing two vertical lines in the center of the cross. Is there a way to modify the code to eli ...

Linking URLs in an Android TextView with the <a href> tag

When creating a TextView dynamically, I encountered an issue with setting the text as linkable. The desired text value was "Google". After referring to various resources on the internet and blogs, such as this one, I attempted different methods but did not ...

What is the best way to personalize Material UI elements, such as getting rid of the blue outline on the Select component?

Embarking on my journey of developing a React app, I made the decision to incorporate Material UI for its array of pre-built components. However, delving into the customization of these components and their styles has proven to be quite challenging for me ...

Tips for arranging Radio buttons in multiple columns within the same Radio group in Material UI

As a newcomer in the world of React.js, I am feeling a bit anxious about posting my question on Stack Overflow. I hope everyone can overlook my lack of experience and forgive me for any mistakes. I have been struggling to find the right solution to my prob ...