Flexbox will work, or you can remove flex and float the .holder
right:
label {
font-family: Segoe UI;
font-size: 18px;
font-weight: lighter;
color: #1E1E1E;
}
.field1 {
font-family: inherit;
margin-bottom: 25px;
}
.holder{
float:right;
}
<div class="field1">
<label>Username</label>
<span class="holder">{{ form.username }}</span>
</div>
Seems like for me it was a Cache problem, so now it’s working with parent div as “field1”
This is what the current code looks right now, I don’t know why isn’t it working
any help is appreciated,
Thanks!
Btw: It works when I set the parent div class to row, and style it with flex the same way.
label {
font-family: Segoe UI;
font-size: 18px;
font-weight: lighter;
color: #1E1E1E;
}
.field1 {
font-family: inherit;
margin-bottom: 25px;
display: flex;
justify-content: space-between;
}
<div class="field1">
<label>Username</label>
<span class="holder">{{ form.username }}</span>
</div>