Styling an unordered list such that a label fits next to it-CodePudding

Consider an unordered list such as the following:

.todo__input {
  border: none;
  outline: none;
  border-bottom: 1px solid black;
}

.todo-section {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 5fr;
  padding: 0 10px;
  width: 50%;
  border: 1px solid black;
}

#bulletPoints {
  margin-top: 0;
  list-style-type: circle;
  list-style-position: outside;
  font-size: 2rem;
}

#bulletPoints>* input {
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

<div >
  <label for="bulletPoints">Todo:</label>
  <ul id="bulletPoints">
    <li><input type="text" ></li>
    <li><input type="text" ></li>
    <li><input type="text" ></li>
  </ul>
</div>

There are two issues that I have with this result:

I would like the first bullet point to be in line with the label "Todo". Currently, it is placed below this label. I don't know if this is possible at all, I would have to move all my input fields up by some space, which I don't know how much it is.
I really don't know where this extra margin (marked in orange) comes from. I would like to remove it.

Does anyone have some ideas?

______ update after @TokaLazy's answer ______

This works perfectly when resetting the font-size of my bullet-points to 1rem. I want them to be larger though.

I was thinking, maybe I could just enlarge the line-height of my label, but this doesn't seem to do the trick.

label {
    line-height: 2rem;
}

CodePudding user response：

For the alignment, you can use align-items: baseline; on the section.

The margin in orange comes from <ul>. Remove it with margin-bottom: 0;

.todo__input {
    border: none;
    outline: none;
    border-bottom: 1px solid black;
}


.todo-section {
    align-items: baseline; /** align "Todo" and first bullet */
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 5fr;
    padding: 0 10px;
    width: 50%;
    border: 1px solid black;
}

#bulletPoints {
    margin-top: 0; /** Replace this by the following row */
    margin: 0 auto; /** It remove margin top and bottom */
    list-style-type: circle;
    list-style-position: outside;
    font-size: 2rem;
}

#bulletPoints > * input {
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
}

CodePudding user response：

You can simply add some margin to the top of the label to line it up. If you decide to change the size or position of your bullet points, simply adjust the margin-top on the label to line up accordingly.
The "extra margin" is coming from the UL element, just make its entire margin: 0;

You also have a margin-bottom: 10px; on the input as well. I left that in the example snippit.

.todo__input {
  border: none;
  outline: none;
  border-bottom: 1px solid black;
}

.todo-section {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 5fr;
  padding: 0 10px;
  width: 50%;
  border: 1px solid black;
}

.todo-section label {
  margin-top: .7rem;
}

#bulletPoints {
  margin: 0;
  list-style-type: circle;
  list-style-position: outside;
  font-size: 2rem;
}

#bulletPoints>* input {
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

<div >
  <label for="bulletPoints">Todo:</label>
  <ul id="bulletPoints">
    <li><input type="text" ></li>
    <li><input type="text" ></li>
    <li><input type="text" ></li>
  </ul>
</div>