Tips for rearranging several input containers at once

I'm struggling to align the two cells for the address input. I can adjust the inline one easily, but the others are giving me trouble. I'm looking for some creative feedback on how to make this work.

.EMBody {
  position: relative;
  background-color: navajowhite;
}

.EMSpace {
  display: inline-block;
  width: 100px;
}

.EMAdj {
  display: inline-block;
  margin-right: 20%;
}

input[type="text"] {
  width: 60%;
}
<section class="EMBody">
  <div>
    <label class="EMSpace">Full Name:</label>
    <input type="text" placeholder="Enter your name">
  </div>

  <div>
    <label class="EMSpace">Address:</label>
    <input type="text" placeholder="Street address">
    <input type="text" class="EMAdj" placeholder="City">
    <input type="text" class="EMAdj" placeholder="Zip">
  </div>

  <div>
    <label class="EMSpace">Phone Number:</label>
    <input type="text" placeholder="9999999999">
  </div>

  <div>
    <label class="EMSpace">Email:</label>
    <input type="text" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42272f232b2e02272f232b2e6c212d2f">[email protected]</a>">
  </div>
  <div>
    <label class="EMSpace">Brief Message: </label>
    <textarea cols="25" rows="5" class="message" placeholder="Please give a brief discription of your Iguana issues. Green or Spiny Tailed? In the attics, flowerbed, canal?"></textarea>
  </div>
</section>

Answer №1

Using the nth-child Selector:

.EMBody {
  position: relative;
  background-color: navajowhite;
}

.EMSpace {
  display: inline-block;
  width: 100px;
}

.EMAdj {
  display: inline-block;
  margin-right: 20%;
}

input[type="text"] {
  width: 60%;
}
input:nth-child(3),input:nth-child(4)
{
  margin-left:104px;
}
<section class="EMBody">
  <div>
    <label class="EMSpace">Full Name:</label>
    <input type="text" placeholder="Enter your name">
  </div>

  <div>
    <label class="EMSpace">Address:</label>
    <input type="text" placeholder="Street address">
    <input type="text" class="EMAdj" placeholder="City">
    <input type="text" class="EMAdj" placeholder="Zip">
  </div>

  <div>
    <label class="EMSpace">Phone Number:</label>
    <input type="text" placeholder="9999999999">
  </div>

  <div>
    <label class="EMSpace">Email:</label>
    <input type="text" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3f373b33361a3f373b333674393537">[email protected]</a>">
  </div>
  <div>
    <label class="EMSpace">Brief Message: </label>
    <textarea cols="25" rows="5" class="message" placeholder="Please give a brief discription of your Iguana issues. Green or Spiny Tailed? In the attics, flowerbed, canal?"></textarea>
  </div>
</section>

Answer №2

An effective solution for creating a fully responsive layout is to utilize CSS-Grid, reducing the amount of code needed.

You can easily implement a 2-column layout and have the address label span across 3 rows.

.EMBody {
  display: grid;
  grid-template-columns: min-content auto;
  column-gap: 10px;
}

.EMBody {
  white-space: nowrap;
}

.EMBody label:nth-of-type(2) {
  grid-row: span 3;
}
<section class="EMBody">

  <label class="EMSpace">Full Name:</label>
  <input type="text" placeholder="Enter your name">

  <label class="EMSpace">Address:</label>
  <input type="text" placeholder="Street address">
  <input type="text" class="EMAdj" placeholder="City">
  <input type="text" class="EMAdj" placeholder="Zip">

  <label class="EMSpace">Phone Number:</label>
  <input type="text" placeholder="9999999999">

  <label class="EMSpace">Email:</label>
  <input type="text" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33565e525a5f73565e525a5f1d505c5e">[email protected]</a>">

  <label class="EMSpace">Brief Message: </label>
  <textarea cols="25" rows="5" class="message" placeholder="Please give a brief discription of your Iguana issues. Green or Spiny Tailed? In the attics, flowerbed, canal?"></textarea>
  
</section>

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

jquery-ui allowing to resize child divisions as well

Currently, I am in the process of developing a website that includes resizable divs with jQuery. However, I have encountered an issue where only the width of the child divs is being resized when I adjust them. For reference, you can view the site and its c ...

Positioning an HTML control on top of a Silverlight Application, ensuring it moves in sync with the application as it scrolls

   I am facing a challenge with my Silverlight Application (VS2010/C#) that runs in full screen mode.    There is also an HTML control positioned over the Silverlight Application.    When I maximize the brows ...

What sets srcset apart from media queries?

Can you explain the contrast between srcset and media query? In your opinion, which is more optimal and what scenarios are ideal for each? Appreciate it! ...

Trouble with Bootstrap 3: Footer refusing to stay at bottom of page

At work, I was given the task to create a mini-webpage layout using bootstrap. I decided to use an existing layout called Amoeba as my base. You can view the preview here. Everything was working almost perfectly on the localhost, except for the footer. If ...

CSS - Issue with dropdown sub-menu alignment despite using absolute positioning in relation to parent button

Title fairly explains it all. I'm having trouble getting my dropdown submenus to align perfectly with the bottom of the parent list item element. The list item has a relative position, while the submenu has an absolute position. I've attempted ...

Eliminate the AM and PM options from the input time selection dropdown menu in HTML

https://i.sstatic.net/wKeQk.png Is it possible to eliminate the AM / PM option from the input time format dropdown? The form builder currently uses a 24-hour format that includes the AM / PM field. ...

Preserving data in input fields even after a page is refreshed

I've been struggling to keep the user-entered values in the additional input fields intact even after the web page is refreshed. If anyone has any suggestions or solutions, I would greatly appreciate your assistance. Currently, I have managed to retai ...

Interactive input field designed for modifying, adding, and removing data in MySQL

I am working on a project where I have a simple form. However, I need to dynamically change the form action from insert to update within the same page. Additionally, I also want to display the values on the same page. Within my code, I have set up the up ...

Hover Image Grid

Having trouble with creating an image grid that displays text on hover? Check out the issue I encountered with my layout: https://i.sstatic.net/PVDzB.jpg For some reason, the text is not aligning properly on the image, causing a layout problem. Any assist ...

Fixed positioning upon scrolling begins prior to reaching the uppermost point (top div)

Currently, I have implemented a feature where #filter (the white select list in my sidebar) becomes fixed when it reaches the top of the page and stays there while scrolling until it reaches the footer and is released. However, I encountered an issue wit ...

Choose the selectize item to always move to the front

Hey there, I'm currently using the selectize plugin to incorporate tags into my website. Everything is working well, except for the issue of the drop-down item being obscured by some of my other divs. I'm looking to have them function more like ...

css side by side with immovable element

Seeking assistance with CSS. I am looking to create a layout as follows: I want a center-fixed menu with a width of 960px - this part is straightforward. Alongside the menu, I aim to have two divs: one spanning from the left edge of the screen to the cl ...

How to Adjust Overlapping Text in CSS?

Currently, I am facing an issue with an element overlapping in my CSS file. On a regular browser, one line of text appears fine but on mobile devices, it overlaps into two lines. This problem is specifically for the mobile version of the website, particula ...

Implement a feature in JSP that allows users to dynamically add or remove fields before submitting the data to the database

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http- ...

My goal is to utilize CSS grid to craft a unique layout by establishing a grid area. However, the layout is not functioning as anticipated

Currently, I am in the process of mastering CSS grid layout design. If you are curious to see my progress so far, check out this Codepen link showcasing my code. Additionally, for a visual representation of the layout, feel free to view the layout image ...

Dropdown menu remains unable to open

One of the dropdown menus on my website is not retracting back properly, but only on the contact page where a Google map is displayed. The issue looks like this: I've tried tweaking the CSS code without success. What could I be missing? Should I prov ...

The CSS child selector seems to be malfunctioning as it is affecting all descendants of the specified type

Struggling with creating a menu containing nested lists. Attempted using a child selector (#menu-novo li:hover > ul) to display only immediate descendants, but all are still showing. Any suggestions or solutions for this issue? #menu-novo-container { ...

Avoid activating the hover state

Is there a way to prevent a button, div, or li from hovering if it already has an active status using CSS? #list-of-tests .item-test:hover:not(.active) { background-color: #4d5f75; border: solid 1px #4d5f75; } #list-of-tests .item-test:active { ...

Effortlessly automate clicking with JavaScript or HTML - learn how now!

Does anyone know how to automatically click a button on a page when it loads? I attempted using this JavaScript code, but it didn't work. <a href="javascript:Clickheretoprint()" id="print"> <script type="text/javascript"> $(document).rea ...

Is it possible to conceal a form field until a previous field has been completed?

Looking for a way to hide a form field until another field is properly completed? I have a divided registration form and want the second field to appear only when the first one is valid. Preferably using CSS3, with HTML5 and maybe some JavaScript if necess ...