Right-Align Ellipsis

Question

For the following html,

<div class="right">
      <p class="name">Chrishtoper Benson</p>
      <p class="refNum">
      
      12345678912345678912345678912345678912345678912345678912345678912345678912345678912345678 Reference T
      </p>
   </div>

And for the below scss is used,

 .right {
                flex: 2;
                @include flexbox;
                @include flex-direction(column);
                justify-content: flex-end;
                .name {
                    text-align: right;
                    font-size: 13px;
                    word-break: break-word;
                }
                .refNum {
                    text-align: right;
                    font-size: 10px;
                    line-height: 20px;
                    width: 100px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .refNum:hover {
                  overflow: visible;
                }
}

I want to align refNum to the right of the screen, unable to do that. Any fixes? Thank you in advance.

Answer 1

Try this below scss:

 .right {
            display:flex;
            align-items:center;
            .name {
                text-align: right;
                font-size: 13px;
                word-break: break-word;
            }
            .refNum {
                text-align: right;
                font-size: 10px;
                line-height: 20px;
                width: 100px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-left:10px;
            }
            .refNum:hover {
              overflow: visible;
            }
       }