I am working on a web page in which I need the text associated with each text to be next to the checkbox. Currently, this is what it looks like:

I do not want any of the checkboxes or labels associated with them to be centered. I want them to be aligned to the left. Here are my JavaScript & global style code:

JS:

import React from 'react'

import { Link } from 'react-router-dom';
import { Form } from '../../global styles/index';
import { useForm } from 'react-hook-form';

function ArtistForm(){

    const { register, handleSubmit, errors } = useForm();
    const onSubmit = data => console.log(data);
    console.log(errors);
    
    return(
        <div>
            <Form onSubmit={handleSubmit(onSubmit)}>
                <div className="form-container">
                    <div className="row">
                        <div className="column">
                            <label>First Name:</label> 
                            <input type="text" placeholder="First Name" name="FirstName" ref={register({required: true, max: 30, min: 2})} />
                        </div>
                        <div className="column">
                            <label>Last Name:</label>
                            <input type="text" placeholder="Last Name" name="LastName" ref={register({max: 30, min: 2})} />
                        </div>
                    </div>
            
                    <div>
                        <label>Medium:</label>
                        <input type="checkbox" id= "designillustration" name="medium" /><span>Design & Illustration</span>
                        <input type="checkbox" id="digitalart" name="medium" /><span>Digital Art</span>
                        <input type="checkbox" id="drawing" name="medium" /><span>Drawing</span>
                        <input type="checkbox" id="paintingmixedmedia" name="medium" /><span>Painting & Mixed Media</span>
                        <input type="checkbox" id="photography" name="medium" /><span>Photography</span>
                    </div>


                    <div>
                        <label>Artist Bio:  </label>
                        <textarea placeholder="Bio" name="Bio" ref={register({required: true, maxLength: 500})} />
                    </div>
            </Form>
        </div>
    )
}

export default ArtistForm

Global Style for Form Component:

// form styling
export const Form = styled.form`
    max-width: 1000px;
    margin: 0 auto;

    label {
        float: left;
        text-align: left;
        display: inline-block;
        padding-left: 15px;
        text-indent: -15px;
    }

    input {
        box-sizing: border-box;
        width: 100%;
        border-radius: 4px;
        padding: 10px 15px;
        margin-bottom: 10px;
        font-size: 14px;
        margin-top: 10px; 
        display: block;
    }

    textarea {
        box-sizing: border-box;
        width: 100%;
        border-radius: 4px;
        padding: 10px 15px;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .form-container {
        display: flex;
        flex-direction: column;
        width: 90%;
        padding: 20px;
        
        @media(max-width: 500px){
            padding: 20px 50px 50px;
        }
    }

    div {
        display: inline-block, flex;
        flex-direction: row;
        justify-content: flex-start;
        padding: .2rem;
    }

    p {
        margin: 0;
    }

    .instructions{
        text-align: center;
        margin-bottom: 40px;
    }

    .column {
        float: left;
        width: 50%;
        padding: 10px;
    }


    .row:after {
        content: "";
        display: table;
        clear: both;
    }
`

Is there something with the input tag that is interfering with how the checkboxes show up with the labels for them? I have tried over and over again to use display: inline-block but for some reason I cannot get the text to be inline with the checkbox. I have also tried to align the text to the left for the label but did not have any luck.

I am working on a web page in which I need the text associated with each text to be next to the checkbox. Currently, this is what it looks like:

I do not want any of the checkboxes or labels associated with them to be centered. I want them to be aligned to the left. Here are my JavaScript & global style code:

JS:

import React from 'react'

import { Link } from 'react-router-dom';
import { Form } from '../../global styles/index';
import { useForm } from 'react-hook-form';

function ArtistForm(){

    const { register, handleSubmit, errors } = useForm();
    const onSubmit = data => console.log(data);
    console.log(errors);
    
    return(
        <div>
            <Form onSubmit={handleSubmit(onSubmit)}>
                <div className="form-container">
                    <div className="row">
                        <div className="column">
                            <label>First Name:</label> 
                            <input type="text" placeholder="First Name" name="FirstName" ref={register({required: true, max: 30, min: 2})} />
                        </div>
                        <div className="column">
                            <label>Last Name:</label>
                            <input type="text" placeholder="Last Name" name="LastName" ref={register({max: 30, min: 2})} />
                        </div>
                    </div>
            
                    <div>
                        <label>Medium:</label>
                        <input type="checkbox" id= "designillustration" name="medium" /><span>Design & Illustration</span>
                        <input type="checkbox" id="digitalart" name="medium" /><span>Digital Art</span>
                        <input type="checkbox" id="drawing" name="medium" /><span>Drawing</span>
                        <input type="checkbox" id="paintingmixedmedia" name="medium" /><span>Painting & Mixed Media</span>
                        <input type="checkbox" id="photography" name="medium" /><span>Photography</span>
                    </div>


                    <div>
                        <label>Artist Bio:  </label>
                        <textarea placeholder="Bio" name="Bio" ref={register({required: true, maxLength: 500})} />
                    </div>
            </Form>
        </div>
    )
}

export default ArtistForm

Global Style for Form Component:

// form styling
export const Form = styled.form`
    max-width: 1000px;
    margin: 0 auto;

    label {
        float: left;
        text-align: left;
        display: inline-block;
        padding-left: 15px;
        text-indent: -15px;
    }

    input {
        box-sizing: border-box;
        width: 100%;
        border-radius: 4px;
        padding: 10px 15px;
        margin-bottom: 10px;
        font-size: 14px;
        margin-top: 10px; 
        display: block;
    }

    textarea {
        box-sizing: border-box;
        width: 100%;
        border-radius: 4px;
        padding: 10px 15px;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .form-container {
        display: flex;
        flex-direction: column;
        width: 90%;
        padding: 20px;
        
        @media(max-width: 500px){
            padding: 20px 50px 50px;
        }
    }

    div {
        display: inline-block, flex;
        flex-direction: row;
        justify-content: flex-start;
        padding: .2rem;
    }

    p {
        margin: 0;
    }

    .instructions{
        text-align: center;
        margin-bottom: 40px;
    }

    .column {
        float: left;
        width: 50%;
        padding: 10px;
    }


    .row:after {
        content: "";
        display: table;
        clear: both;
    }
`

Is there something with the input tag that is interfering with how the checkboxes show up with the labels for them? I have tried over and over again to use display: inline-block but for some reason I cannot get the text to be inline with the checkbox. I have also tried to align the text to the left for the label but did not have any luck.

• javascript
• html
• css
• node.js
• reactjs

• 1 use display: flex; align-items: center; – s.kuznetsov Commented Aug 6, 2020 at 22:41
• 2 Not sure where'd you get your CSS from, but display: inline-block, flex is not a valid CSS. Display values are not ma-separated, in fact there are no multiple values for display. – Robo Robok Commented Aug 6, 2020 at 22:43
• 1 For you input styles, remove display: block. The natural display for an input is inline-block which is what you would need for the behavior your looking for. – Pradeep Dayaram Commented Aug 6, 2020 at 22:51

3 Answers 3

From your code, the solution can be done in 3 steps:

1. removing the following styles from the input selector

    width: 100%;
    display: block;
   

   Both of these styles were giving your input element the width: 100% which pushes the text below.

2. Then from there, what I would do is wrap each of the input and span pairs in divs. This will section off the two inline elements into its own container while allocating the full width to the elements e.g.

   <div>
      <input type="checkbox" id= "designillustration" name="medium" />
      <span>Design & Illustration</span>
   </div>
   

3. Add the following css to restore width: 100% on the text inputs

   input[type="text"] {
        width: 100%;
   }
   

Here is a codepen that demonstrates the solution on the first checkbox input row: https://codepen.io/ariellav/pen/poyvPKR

Other note:

Replacing

label {
    float: left;
    text-align: left;
    display: inline-block;
    padding-left: 15px;
    text-indent: -15px;
}

with

label {
    display: block;
}

should reap the same result

you've set your

input{
width: 100%;
}

that takes the whole width of the container and doesn't allow the text to display inline

You have to have label tags next that are to/for the input button. Also, you must get rid of your input{width: 100%;}

<input type="checkbox" id="designillustration" name="medium"/>
<label for="designillustration">Design & Illustration</label>