To give a general explanation, the footer looks like this when rendered:
<!-- Your content goes here -->
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:
This will make the footer description "fill" the empty space in the footer, and the search by value "fill" the description.