How to left-align some content in Clarity <clr-dg-footer>

I have a Clarity datagrid with pagination and a filter. I have some text that I would like to left-align on the same line as the pagination information. What's the correct way to do this? I've tried setting float: left; and float:right; in the two spans and also using the built-in "row" class. For reference, my footer looks like

<clr-dg-footer>
    <span style="width:100%;">Search by value</span>
    <span *ngIf="procs.length>0">
      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
      of {{pagination.totalItems}}
    </span>

    <clr-dg-pagination #pagination [clrDgPageSize]="10"></clr-dg-pagination>
  </clr-dg-footer>
</clr-datagrid>

This is transformed into something like:

<clr-dg-footer _ngcontent-c25="" class="datagrid-foot">
  <div class="datagrid-foot-description">
      1 - 10
      of 103 users
  </div>
  <clr-dg-pagination _ngcontent-c25="" _nghost-c27="">
    <ul _ngcontent-c27="" class="pagination">
        ...
    </ul>
  </clr-dg-pagination>
</clr-dg-footer>

Solution

To give a general explanation, the footer looks like this when rendered:

<clr-dg-footer>
    <various-built-in-controls-from-clarity />
    <div class="datagrid-foot-description">
        <!-- Your content goes here -->
    </div>
    <clr-dg-pagination></clr-dg-pagination>
</clr-dg-footer>

The footer itself is a flexbox, so setting widths as percentage on your content will not do anything. Clarity doesn't have a great way for you to left-align your content right now, and you should definitely open a ticket for it on GitHub, but in the meantime you can add the style flex: 1 to .datagrid-foot-description in your CSS which will make it take the all the available space on the footer, and then add any styles you want to your own content to display it as you want. For instance, using more flex with the two spans from your example:

.datagrid-foot-description {
    flex: 1;
    display: flex;
}

.search-by-value {
    flex: 1;
}

This will make the footer description "fill" the empty space in the footer, and the search by value "fill" the description.