Move checkbox to top left corner of text-CodePudding

I am having some troubles with check-box component in HTML. Currently my checkbox looks like this:

Code snippet:

<p  style="display:grid; grid-template-columns: auto auto; font-size:12px;font-weight:400;margin-bottom:10px;">

<input type="checkbox"checked style="width:auto;"/>
<label>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti 
<a href="/website.com/">MY LINK.</p></label></a>

Now the checkbox is in the middle of the text but I need it to be in top left corner. How do I do that?

CodePudding user response：

Use align-self: start; on the input element:

CSS:

input {
  align-self: start;
}

https://jsfiddle.net/br3k1wfu

Like others mentioned your HTML has a few problems. The p and a element closing tags are in wrong spots. You can see them highlighted in red in the JS fiddle. Also using inline styles is a bad practice and will make your code hard to read and maintain. Prefer adding the styles to separate CSS files.

Example:

.rte {
  display: grid;
  grid-template-columns: auto auto;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 10px;
}

#my-input {
  width: auto;
  align-self: start;
}

https://jsfiddle.net/xv3kyLqo/