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:

This is how I want it to be displayed:

.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

If the iframe's CSS source is updated, the parent's CSS source will also change

Issue encountered while generating dynamic Routes using the map function

Utilizing Laravel 5.2 to showcase a video

Is there a way to incorporate CSS or tables when converting HTML to PDF using JavaScript?

Is there a method similar to insertBefore that works with arrays and/or HTMLCollections?

Customizing Material UI Themes: A Guide to Globally Overriding Children Styles

I am encountering errors when running NPM start

Accessing and displaying a randomly selected PDF file from a directory using HTML coding

Failures in React-router on the server side

The form action now triggers the download of the PHP file instead of simply loading

What is a more efficient method for obtaining the current URL in isomorphic React applications that works on both the client and server side?

"Enhance your React app with stunning typography and

<ol><li>Arranges elements in a peculiar way if the image is aligned to the left</li></ol>

I want to deploy all my React files, including the source code, on Google App

The proper way to update MUI styles

Removing styling from a table header and specific table data cells with CSS

What's the best way to ensure my website's footer spans the entire width of the webpage?

The use of pattern fill in fabric.js is causing a decrease in rendering speed

Having trouble with sending a POST request to a URL?

Using the PMT function in PHP allows for easy calculation of