CODEWITHSUNDEEP
htmlcsssassmaterial-design
Lido Fernandez
Lido Fernandez

Reputation: 456

How to align two divs to the right while keeping them align to the left

I need to keep the same align of the divs but they are all align to the right: Here I have an image: As you can see the 'hello' and 'helloooooo' are both align to the right but I want them align to the left.

enter image description here

so It looks like this:

enter image description here

HTML

<ul class="fu-form--job-edit-details mdl-list">
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <span class="fu-form--job-edit-details--title">Hello:</span>
      World
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <span class="fu-form--job-edit-details--title">Hello:</span>
      World
    </span>
  </li>
</ul>

CSS:

.fu-form--job-edit-details {
  .mdl-list__item {
    color: $text-label-color;
    padding: 0;
    min-height: 35px;
  }

  .mdl-list__item-primary-content {
    justify-content: flex-end;
  }

  .fu-form--job-edit-details--title {
    font-weight: bold;
    padding-right: 5px;
  }
}

Upvotes: 0

Views: 36

Answers (1)

easa
easa

Reputation: 302

Is it what you want?

.fu-form--job-edit-details{
  float:right;
  text-align: right;
}


.mdl-list__item {
    color: #222;
    padding: 0;
    min-height: 35px;
    list-style:none;
  }

  .mdl-list__item-primary-content {
    /*justify-content: flex-end;*/
    width: 100%;
  }

  .fu-form--job-edit-details--title {
    font-weight: bold;
    padding-right: 5px;
    float:left;
  }
<ul class="fu-form--job-edit-details mdl-list">
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <span class="fu-form--job-edit-details--title">Hello:</span>
      World
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <span class="fu-form--job-edit-details--title">Hellooooooooooooooo:</span>
      World
    </span>
  </li>
</ul>

Upvotes: 1

Related Questions