Keeping label on two lines starting from the same point?

user_17015048 0
Viewed 59

How can I keep a label and it's text starting on the same place? For example, what I want to achieve:

☑️ Lorem ipsum dolor sit amet,
     consectetur adipiscing elit.

And here is my attempt: 

div {
  width:300px;
}

label:before {
    content: "";
    display: inline-block;
    margin-right: 10px;
    height: 15px;
    width: 15px;
    border: 2px solid #666;
    border-radius: 3px;
    background-color: #fff;
    transition: background-color 0.2s;
}
<div>
  <label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at     molestie mi.</label>
</div>

css html
1 Answers

You could use flexbox from CSS like so:

div {
  width:300px;
}
/* lines I added */
label{
 display: flex;
 align-items:flex-start;
}

label:before {
    content: "";
    display: inline-block;
    margin-right: 10px;
    height: 15px;
    width: 15px;
    /* line I added */
    flex:none;
    border: 2px solid #666;
    border-radius: 3px;
    background-color: #fff;
    transition: background-color 0.2s;
}
<div>
  <label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at     molestie mi.</label>
</div>

user_152886410
Related