如何在我的复选框内联和复选框旁边获取文本？

我正在一个网页上，我需要与每个文本关联的文本都在复选框旁边。当前，它是这样的：

我不希望任何与它们相关联的复选框或标签居中。我希望它们向左对齐。这是我的JavaScript和全局样式代码：

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

表单组件的全局样式：

// 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;
    }
`

输入标签是否有某些东西会干扰复选框显示标签的方式？我已经反复尝试使用，display: inline-block但是由于某种原因，我无法使文本与复选框内联。我也尝试将标签的文本向左对齐，但是没有运气。