Text fields and their headings in two columns

[Alberto]

There's a HTML mark with elements. input in labelI can't change it. How to put it through CSS in two columns. In the left, writing, right, text fields. The letters in the left column shall be attached to the right edge. I tried that:

label {
  display: block;
}
label > *:first-child {

width: 8em;

text-align: right;

display: inline-block;

background-color: #eee;

}

<form>

<label>Email <input name="email" type="email"></label>

<label>Password <input name="password" type="text"></label>

<button type="submit">Login</button>

</form>

UPDATE:
It's supposed to:

[rosemadder]

You can use it. display:flex

label {
  display: flex;
  justify-content: space-between;
  width: 16em;
}
label > :first-child {

width: 8em;

background-color: #eee;

}

<form>

<label>Email <input name="email" type="email"></label>

<label>Password <input name="password" type="text"></label>

<button type="submit">Login</button>

</form>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

UPD. to the right

label {

display: flex;
justify-content: flex-end;
width: 16em;
}
label >:first-child {
margin-left: 1em;
width: 8em;
background-color: #eee;
}

<form>

<label>Email

<input name="email" type="email">

</label>

<label>Password

<input name="password" type="text">

</label>

<button type="submit">Login</button>

</form>