Question 190102 in CSS Question posted in
Some basic documentation can be found here.

Css – how do i make the checkbox appear beside the text

Hi i am working on a react todolist and I am having trouble with the CSS, can someone with more experience help me with figuring out the problem I am encountering? No matter what I do I can’t seem to get the checkbox to appear beside the placeholder text how do I do this in CSS

import React from "react"

function TodoItem() {
    return (
        <div className="todo-item">
            <input type="checkbox" />
            <p>Placeholder text here</p>
        </div>
    )
}

export default TodoItem

?

Tags:

2

Answers


  1. 0

    You can use "span" instead of "p" to fix this.

    import React from "react"

function TodoItem() {
    return (
        <div className="todo-item">
            <input type="checkbox" />
            <span>Placeholder text here</span>
        </div>
    )
}

export default TodoItem
    Login or Signup to reply.
  2. 0

    The p paragraph element is block-level, therefore will start on its own line. The easiest way to put the two elements side-by-side while being able to control the alignment of the input is to use Flexbox. Add display: flex; declaration to the .todo-item rule in your CSS.

    .todo-item {
  display: flex;
  }
    <div class="todo-item">
  <input type="checkbox" />
  <p>Placeholder text here</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search