Solution 1 :

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>

Solution 2 :

Seems like for me it was a Cache problem, so now it’s working with parent div as “field1”

Problem :

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>

Comments

Comment posted by Anurag Srivastava

It does seem to work..are you sure you’re asking the right question?

Comment posted by chriskirknielsen

Could you explain your issue? I’m seeing “username” on the left and

Comment posted by Anurag Srivastava

Add more info to the question

By