Managed to fix this with FlexBox
All of this can be played with to figure out the best solution for the user…
/* Moves the fields so they’re in front of each other */
#wpcaptcha-form {
color: #fff;
display: flex;
gap: 5px;
flex-direction: row;
}
/* Moves the numbers so they’re in front of each other */
#wpcaptcha-form .wpcf7-form-control-wrap {
display: flex;
flex-direction: row;
gap: 15px;
flex-wrap: wrap;
}
/* Moves the answer input so it’s always the 3rd. In the end. */
#top #wrap_all #wpcaptcha-form .wpcf7-form-control {
order: 3;
width: 200px;
}
It’s very confusing that the numbers change place all the time.
My suggestion is for the mistery number to be substituted by ‘?’ instead o an empty space.