Necesito ayuda en alinear elementos

Hola, tengo un formulario ya creado y no sé por qué motivo una fila me sale correcta y la otra se me meuve abajo. Necesito que ambas estén alineadas tal como muestro en la foto:

Hola Conferences_,

Gracias por contactar al Servicio de Soporte de Jotform. Necesito un poco de tiempo para revisar esto. Te responderé lo más pronto posible.

Gracias por tu paciencia, lo apreciamos mucho.

Hola Conferences_,

He clonado tu formulario y lo probé para ver si podía replicar el problema, pero todo funcionó correctamente. Mira la grabación de pantalla a continuación para ver mis resultados:

¿Podrías explicar cuál es la ubicación correcta de estos campos?

Una vez nos respondas, podremos ayudarte con esto.

Hola!

Lo que quiero es quue salgan así:

Registration fee Companion y en la misma linea al otro lado la casilla de: Nº Attendees. Es decir como aqui

Hola Conferences_,

Gracias por la aclaración. Para esto vamos a modificar el código CSS que tienes en tu formulario y arreglar manualmente los campos, es fácil, déjame mostrarte como hacerlo:

1. Copia el código siguiente:

.form-line.form-line-column.form-col-2.jf-required {

    padding : px px px 1000px;

    margin : px px px 40px;

}

.form-subHeader {

    font-weight : bolder;

    font-size : 15px;

}

.form-line.jf-required {

    margin : 0px 0px 0px 0px;

}

.form-header {

    font-size : 20px;

}

.form-line {

    margin : 0px;

}

.form-input-wide {

    padding : 0px;

}

[data-css-selector="id_222"] {

    width : 330px;

    padding : 27px 0px 0px 0px;

}

[data-css-selector="id_257"] {

    width : 335px;

    margin : 11px px 10px px;

    padding : 27px 3px 3px 32px;

}



[data-css-selector="id_217"] {

    background-color : #d9d7d7;

}

[data-css-selector="id_226"] {

    margin : 0px;

}

[data-css-selector="id_62"] {

    margin : 0px px 0px px;

}

[data-css-selector="id_206"] div.form-input-wide {

    margin : 0px 0px 0px 0px;

}

[data-css-selector="id_206"] {

    margin : px px 0px px;

    padding : 0px;

}

[data-css-selector="id_230"] {

    padding : 0px;

}

[data-css-selector="id_232"] {

    margin : 0px 0px 0px 0px;

    padding : 0px 0px 0px 0px;

}

[data-css-selector="id_208"] div.form-input-wide {

    margin : 0px;

}

[data-css-selector="id_208"] p.hover {

    padding : 0px;

}

[data-css-selector="id_208"] {

    margin : 0px;

    padding : 0px;

}

[data-css-selector="id_232"] div.form-input-wide {

    padding : px px 4px px;

}

[data-css-selector="id_232"] p.hover {

    line-height : 10px;

}

[data-css-selector="id_232"] em.hover {

    line-height : 10px;

}

[data-css-selector="id_258"] {

    margin : 0px;

    padding : 0px 0px 1px 0px;

}

[data-css-selector="id_73"] {

    padding : 0px;

}

[data-css-selector="id_221"] {

    padding : 0px;

}

[data-css-selector="id_53"] p.hover {

    line-height : 12px;

}

[data-css-selector="id_69"] {

    margin : px px px 9px;

    box-sizing : 300px;

    width : 336px;

}

[data-css-selector="id_38"] {

    width : 340px;

}

[data-css-selector="id_258"] div.form-input-wide {

    padding : 0px;

}

[data-css-selector="id_126"] label.form-label {

    font-weight : bolder;

}

[data-css-selector="id_127"] label.form-label {

    font-weight : bolder;

}

[data-css-selector="id_128"] {

    width : 300px;

}

[data-css-selector="id_129"] {

    width : 400px;

}

[data-css-selector="id_218"] {

    width : 400px;

}

[data-css-selector="id_130"] {

    width : 400px;

}

.form-label.form-label-auto {

    display : block;

    float : none;

    text-align : left;

    width : 100%;

}

[data-css-selector="id_308"] {

    width : 300px;

}

2. Después, en el Creador de Formularios, haz clic en el Ícono del rodillo de pintura en el lado derecho de la página para abrir el Diseñador de Formularios.

3. Ahora, en el menú del Diseñador de Formularios, haz clic en la pestaña Estilos, desplázate hacia abajo y pega el código en el cuadro Inyectar código CSS, asegúrate de remplazar todo el código por el que he compartido contigo. Eso es todo. El código se guarda automáticamente.

Ahora, vamos a mover el campo:

1. En el Creador de Formularios, haz clic y mantén presionado el elemento que deseas mover, en este caso Registration for social activity.
2. Arrástralo hasta la ubicación deseada en el formulario y suelta el botón del mouse.

Observa la grabación de pantalla siguiente para ver mis resultados:

Haz la prueba y déjanos saber si hay algo más en lo que te podamos ayudar.

Ahora genial, pero ¿me podrías explicar mejor que hemos hecho para entenderlo?

Entiendo que en el código que me has proporcionado, se ha reestablecido el formato de márgenes del formulario, pudiendo así arrastrar en una misma fila dos elementos?

¡Gracias por tu atención!

Hola Conferences_,

Claro, te explico. En el código que he proporcionado hice cambios que afectan el tamaño de los elementos con el precio. Ahora, estos elementos estaban ocupando más del 50% del ancho total de la fila, y por eso estaban uno debajo del otro. Hasta acá todo está bien. Pero cuando esto pasa, el Creador de Formularios no deja arrastrar los otros elementos porque no hay espacio para colocarlos en la misma fila. Entonces, con las modificaciones en el código se reduce el tamaño de ‘Registration Fee’ y tenemos suficiente espacio para acomodar y arrastrar los campos de ‘N Attendees’.

[data-css-selector="id_128"] { 

    width : 300px; /*aqui se reduce el ancho de Registration companion*/

}

[data-css-selector="id_129"] {

    width : 400px;

}

[data-css-selector="id_218"] {

    width : 400px;

}

[data-css-selector="id_130"] {

    width : 400px;

}

.form-label.form-label-auto {

    display : block;

    float : none;

    text-align : left;

    width : 100%;

}

[data-css-selector="id_308"] { 

    width : 300px; /*aqui se reduce el ancho de Registration social activity*/

}

No dudes en contactarnos si tienes cualquier otra pregunta.