0

I'm trying to modify a Squarespace contact form so that the input fields are on the right hand side while the title and description are stacked on top of each other on the left hand side. I imagine this is possible with flexbox but I'm struggling to figure out exactly how.

.title, .description, .field-element {
  background-color: rgba(84, 97, 156, 0.2);
  padding: 20px;
  margin: 5px;
  border-radius: 4px;
  color: rgb(84, 97, 156);
  display: flex;
}

.description {
  color: rgba(84, 97, 156, 0.5);
 }
<div class="field-list">
  <div class="title">Your Name</div>
  <div class="description">Please provide your name</div>
  <div class="field-element"><input placeholder="John Smith" /></div>
</div>

enter image description here

colindunn
  • 3,139
  • 10
  • 48
  • 72
  • Assuming you can't change the markup and wrap "title" and "description" in a div, and achieve what you want that way? – avocadatoria Feb 23 '20 at 23:20
  • unfortunately not. and yeah, everything is contained inside of one div. – colindunn Feb 23 '20 at 23:24
  • Not sure why this was marked as a dupe; not sure the OP has enough control over the markup for the linked solution to work. I just wrote a full answer to this, but since I can't post it, the abbreviated version: set the `field-list` container to `columns: 2`, then (similarly to the linked solution) set the height of `field-element` to twice that of the other two. You'll also need `break-inside: avoid` to keep `description` from potentially wrapping to the second column. – avocadatoria Feb 23 '20 at 23:47

0 Answers0