You need a two-third
column CSS and a layout like this:
----------------------------------------------
| .two-third | .one-third |
----------------------------------------------
| .one-half | .one-half | |
-----------------------------| Submit |
| Name column | Email column | button |
-----------------------------| column |
| Acceptance column | |
----------------------------------------------
So the CSS rules: (the ...
means your code and intact)
.one-half,
.one-third,
.two-third, /* Add this */
.one-fourth {
...
}
.one-half { width: 48%; }
.one-third { width: 30.66%; }
.two-third { width: 61.32%; } /* Add this */
.one-fourth {width: 22%;}
...
@media only screen and (max-width: 767px) {
/* Add the .two-third here, or somewhere else where appropriate based on your
preferred mobile layout / design. */
.one-half, .one-third, .two-third {
...
}
}
/*Horizontal form only*/
...
/* Add this.. */
.wpcf-accept {
clear: both;
}
...
The HTML part: (re-indented for clarity)
<div class="wpcf-wrap">
<div class="two-third">
<div class="one-half">
<label> Your Name (required)
[text* your-name] </label>
</div>
<div class="one-half last">
<label> Your E-mail (required)
[email* your-email] </label>
</div>
<div class="wpcf-accept">
[acceptance acceptance-487] I accept with <a href="https://wordpress.stackexchange.com/">agreement</a> of
the personal data processing [/acceptance]
</div>
</div><!-- .two-third -->
<div class="one-third last">
[submit "Send"]
</div>
</div>
[response]
Try a demo here.