CODEWITHSUNDEEP
htmlcssreactjs
bloom bloom
bloom bloom

Reputation: 131

How to make div elements appear inline with a flex direction of column?

I am trying to get the text input on the same line as the h1 tag inline then display it as a flex-direction of column. But it only seems to want to set all the inputs in a line and with the h1 on top which is not what I want.

Here is what I mean. enter image description here

here is the desired output: enter image description here

.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>

Upvotes: 1

Views: 994

Answers (3)

cloned
cloned

Reputation: 6742

You should look into semantics of HTML, <h1> is used for headlines.

If you want to add labels for input fields you should use <label for="...">. You can style the any tag in any way you want so default styling should not be a reason to use a tag at all.

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

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

.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>

Upvotes: 2

Derek Wang
Derek Wang

Reputation: 10204

To make the design you want, it is needed to set flexbox on the div which contains input and h1.

So in this case, there will be 3 divs to have the flexbox design and all of them are the direct childs of .contactusinput selector.

So on style, you can set the .contactusinput > div (direct div child of .contactusselector) style to flexbox as follows.

.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>

Upvotes: 1

Idrizi.A
Idrizi.A

Reputation: 12040

That's because h1 is a block element, and since it's inside an un-styled div, it will push the input in a new line.

If you make the div that wraps the h1 and the input as flexbox, it will look similar to the image:

.contactusinput div {
  display: flex;
}

You don't need flexbox on any of the parents for this to work.

To push inputs in the same line you can add min-width to the h1:

h1 {
  min-width: 200px;
}

You will need to apply different styling to smaller screens, likely removing the min-width and showing the h1 in a column instead of row.

Here is a jsFiddle

By the way, heading elements h1-h6 aren't meant for this. You generally want to have only one h1 in the entire site. The better option to use here would be label.

Upvotes: 2

Related Questions