What is the best way to align div elements side by side while using a flex direction of column?

Question

What is the best way to align div elements side by side while using a flex direction of column?

I need help aligning the text input next to the h1 tag, inline, and then displaying it as a flex-direction of column. Currently, all inputs are being set in a line with the h1 on top which is not the intended layout.

Here is an illustration: https://i.sstatic.net/68LMf.png

This is how I want it to be displayed: https://i.sstatic.net/7eQSH.png

.contactuscontent{
          border: 1px solid pink;
          display: flex;
      }
    
    
    .contactusinput {
        display: inline-flex;
        flex-direction: column;
        border: 1px solid purple;
    }

<div class="contactuscontent">
          <div class="contactusinput">
            <div class="name"><h1>Name</h1> <input type="text"> </div>
            <div class="email"><h1>Email</h1> <input type="text"> </div>
            <div class="refer"><h1>How did you find us</h1> <input type="text"> </div>
          </div>
        </div>

html css reactjs

Answer 1

Answer №1

Exploring the semantics of HTML is essential; use <h1> for headlines.

For labeling input fields, opt for

<label for="...">

. Remember, you have the freedom to style any tag as you desire, so default styling should not dictate your choice of tags.

.contactuscontent {
  border: 1px solid purple;
  display: flex;
  justify-content: center;
}

.contactusinput {
  width: 400px;
  border: 1px solid teal;
}

.contactusinput>div {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.contactusinput label {
  width: 200px;
}

.contactusinput input,
.contactusinput textarea {
  width: 200px;
  padding: 3px;
  }

<div class="contactuscontent">
  <div class="contactusinput">
    <div class="name"><label for="name">Name</label> <input type="text" id="name" name="name"> </div>
    <div class="email"><label for="email">Email</label> <input type="text" id="email"> </div>
    <div class="refer"><label for="howtofind">How did you find us</label> <textarea id="howtofind"> </textarea> </div>
  </div>
</div>

Answer 2

Exploring the semantics of HTML is essential; use <h1> for headlines.

For labeling input fields, opt for

<label for="...">

. Remember, you have the freedom to style any tag as you desire, so default styling should not dictate your choice of tags.

.contactuscontent {
  border: 1px solid purple;
  display: flex;
  justify-content: center;
}

.contactusinput {
  width: 400px;
  border: 1px solid teal;
}

.contactusinput>div {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.contactusinput label {
  width: 200px;
}

.contactusinput input,
.contactusinput textarea {
  width: 200px;
  padding: 3px;
  }

<div class="contactuscontent">
  <div class="contactusinput">
    <div class="name"><label for="name">Name</label> <input type="text" id="name" name="name"> </div>
    <div class="email"><label for="email">Email</label> <input type="text" id="email"> </div>
    <div class="refer"><label for="howtofind">How did you find us</label> <textarea id="howtofind"> </textarea> </div>
  </div>
</div>

Answer 3

Answer №2

It's happening because the h1 element is a block element, which causes it to push the input onto a new line since it's inside an unstylized div.

If you turn the div containing both the h1 and the input into a flexbox, it will appear similar to the image:

.contactusinput div {
  display: flex;
}

You don't necessarily need to apply flexbox to any of the parent elements for this solution to work.

To keep the inputs on the same line, consider adding a min-width property to the h1:

h1 {
  min-width: 200px;
}

For smaller screens, you might need to adjust the styling by removing the min-width property and displaying the h1 as a column instead of a row.

Feel free to check out this example on jsFiddle

By the way, using heading elements like h1-h6 in this context isn't ideal. It's recommended to have only one h1 throughout the entire website. Consider using a label instead for better structuring.

Answer 4

It's happening because the h1 element is a block element, which causes it to push the input onto a new line since it's inside an unstylized div.

If you turn the div containing both the h1 and the input into a flexbox, it will appear similar to the image:

.contactusinput div {
  display: flex;
}

You don't necessarily need to apply flexbox to any of the parent elements for this solution to work.

To keep the inputs on the same line, consider adding a min-width property to the h1:

h1 {
  min-width: 200px;
}

For smaller screens, you might need to adjust the styling by removing the min-width property and displaying the h1 as a column instead of a row.

Feel free to check out this example on jsFiddle

By the way, using heading elements like h1-h6 in this context isn't ideal. It's recommended to have only one h1 throughout the entire website. Consider using a label instead for better structuring.

Answer 5

Answer №3

In order to achieve the desired design, you must apply the flexbox property to the div that contains both the input and h1 elements.

Therefore, in this scenario, there will be three divs with flexbox design, all of which are direct children of the .contactusinput selector.

For styling purposes, you can set the style of the direct child div of .contactusselector to utilize flexbox, as shown below.

.contactuscontent {
  border: 1px solid pink;
  display: flex;
}

.contactusinput {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid purple;
}

.contactusinput > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="contactuscontent">
          <div class="contactusinput">
            <div class="name"><h1>Name</h1> <input type="text"> </div>
            <div class="email"><h1>Email</h1> <input type="text"> </div>
            <div class="refer"><h1>How did you find us</h1> <input type="text"> </div>
          </div>
        </div>

Answer 6

In order to achieve the desired design, you must apply the flexbox property to the div that contains both the input and h1 elements.

Therefore, in this scenario, there will be three divs with flexbox design, all of which are direct children of the .contactusinput selector.

For styling purposes, you can set the style of the direct child div of .contactusselector to utilize flexbox, as shown below.

.contactuscontent {
  border: 1px solid pink;
  display: flex;
}

.contactusinput {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid purple;
}

.contactusinput > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="contactuscontent">
          <div class="contactusinput">
            <div class="name"><h1>Name</h1> <input type="text"> </div>
            <div class="email"><h1>Email</h1> <input type="text"> </div>
            <div class="refer"><h1>How did you find us</h1> <input type="text"> </div>
          </div>
        </div>

What is the best way to align div elements side by side while using a flex direction of column?

Answer №1

Answer №2

Answer №3

Similar questions

Arrange text and a button side by side in a table cell using an Angular directive and an HTML template

retrieving data from a node and embedding it into an HTML file

Ways to enable file/result downloads on a website using HTML

Tips for accessing the firebase user's getIdToken method in Next.js after a page reload

Change Dropdown menu orientation to vertical

Utilizing the useRef hook in React to retrieve elements for seamless page transitions with react-scroll

Code in JavaScript that shows only a portion of the selected option in a dropdown menu

What guidelines does React offer in terms of determining the optimal number of nested components to use in a given application?

Trouble with CSS Class Showing Up Only When Hovered

Manipulating the size of one div automatically adjusts the size of the other, as they are

The Americanpurpose1 font family features playful smiley faces when special characters such as parentheses and hashtags are used

Integrating additional youngsters into the HTML DOM using Angular.js

On a medium-sized screen, a collapsible button unexpectedly appears amidst the various links

React Material UI Expansion Panel with disabled cursor pointer

Trouble with getting Tailwind CSS animations to function properly in ReactJs/NextJs

When scrubbing through videos, Chrome consistently throws a MEDIA_ERR_DECODE error

Ways to expand the vertical tab width for improved icon visibility and ease of clicking

Invalidity of types occurs when dispatching data to redux

What is the method for accessing a selector within a foreach loop?

Any suggestions on how to avoid code repetition using Jquery?