Contact 7 Form Layout

Question

Team of legends. I need you help. I need this form like

Col 1 Row 1: Name Row 2: Email Row 3 Phone

Col 2 Row Span: Message

<div class="wpcf7-wrap">
<div class="col-sm-3">
  [text* your-name placeholder "Name:"]
</div>

<div class="col-sm-3">
   [email* your-email placeholder "Emai:"]
</div>

<div class="col-sm-3">
 [tel* tel-708 placeholder "Phone:"]
</div>

 <div class="col-xs-6">
    [textarea your-message placeholder "Message:"]
 </div>

<div class="col-xs-12 wpcf7-button-wrap">
  [submit "Contact Us"]
</div>

Answer 1

The key to something like this would be to either use CSS Grid or Flexbox. For this specific question, Flexbox will work, so I'll use that.

Flexbox can equalize the heights of its children, so the key would be to use two columns, where the left is also a Flexbox and contains the three rows. You didn't mention where you want the Submit button, so I left it outside:

<div class="wpcf7-wrap">

    <div class="left-column">

        <div class="col-sm-3">
            [text* your-name placeholder "Name:"]
        </div>

        <div class="col-sm-3">
            [email* your-email placeholder "Emai:"]
        </div>

        <div class="col-sm-3">
            [tel* tel-708 placeholder "Phone:"]
        </div>

    </div>

    <div class="right-column">

        <div class="col-xs-6">
            [textarea your-message placeholder "Message:"]
        </div>

    </div>

</div>

<div class="col-xs-12 wpcf7-button-wrap">
    [submit "Contact Us"]
</div>

From there you can create the columns with Flexbox:

.wpcf7-wrap {
    display: flex;
    align-items: stretch;
}

.left-column {
    display: flex;
    flex-flow: column;
}

.left-column > * {
    flex: 1 1 0;
}

Hopefully this will get you started at least!

Here's a fiddle.