0

I'm trying to use flexbox to achieve a column layout with an element "floated" to the right.

Something like this:

enter image description here

Thing is, I cannot alter the HTML since it's an embedded form so trying to achieve this via pure CSS.

So far, I have this:

.form {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.form-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: space-between;
}

.form-form {
  width: 100%;
}

form {
  display: flex;
  justify-content: center;
}

fieldset {
  border: 0;
}

textarea {
  resize: none;
}

.form-columns-2 {
  display: flex;
}

.form-columns-2 input:first-child {
  margin-bottom: .5em
}

.form-columns-1 textarea {
  height: 100%
}
.submit-wrapper{
  flex-direction:column;
}
<div class="form">
  <div class="form-container">
    <div class="form-form">
      <form>
        <fieldset class="form-columns-2">
          <input type="text" placeholder="test">
          <input type="text" placeholder="test">
        </fieldset>
        <fieldset class="form-columns-2">
          <input type="text" placeholder="test">
          <input type="text" placeholder="test">
        </fieldset>
        <fieldset class="form-columns-1">
          <textarea placeholder="test">Text</textarea>
        </fieldset>
        <div class="submit-wrapper">
          <div class="actions">
            <input type="submit" value="Submit">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Edit:

I also need the submit button to sit under the textarea, but since the .submit-wrapper is a direct child of form, the only way I can see addressing this is by adding flex-direction: column; to form. However, this turns the whole layout into a column, which I do not want.

Freddy
  • 683
  • 4
  • 35
  • 114

1 Answers1

2

You are apllying display: flex to the wrong elements and to more elements than you need to.

Check this: https://codepen.io/anon/pen/dwPoEP

* {
  box-sizing: border-box;
}
fieldset{
  border:0;
}
textarea{
  resize:none;
}

form { // you want the form to be a flex box, not everything!
  display: flex;
  justify-content: center;
}
.form-columns-2 {
  display: flex; //you can use other options here, this works but you can use display: block on the inputs for example
}

// this 2 are just to make it look like the image
.form-columns-2 input:first-child {
  margin-bottom: .5em
}
.form-columns-1 textarea {
  height: 100%
}
arieljuod
  • 15,460
  • 2
  • 25
  • 36
  • ah, cheers! Followup question, I'm trying to get the submit button to sit under the textarea. I've updated my original post to show the latest code and query. If you could look at that, that'll be cool? – Freddy Dec 10 '18 at 14:26
  • Hmmm, with that new requirement I would use a grid layout, something like `display: grid; grid-template-areas: 'inputs1 inputs2 textarea' 'inputs1 inputs2 submit';` and then you can position the items with `.submit-wrapper {gird-area: submit}` `.form-columns-1 {grid-area: textarea}`. – arieljuod Dec 10 '18 at 14:38