padding: 10px 10px 10px 0;
flex-flow: row wrap;
<div class="setting-popup-icon"><span class="zmdi zmdi-time-restore"></span></div>
<div class="setting-popup-main"><span class="setting-header text-uppercase">Sync. frequency</span>
<input type="number" min="0"/>
If you're styling a component, I would put all relevant styles into classes that are specific to the particular component. However, you used
.flex as an example here, which is pretty generic, so whether factor it out or not is debatable. I wouldn't factor it out though.
Generally, the approach to factor out modifier classes, like
right etc. is pertaining to frameworks like
bootstrap, since there is no assumption how and where these modifiers will be used. Again, if you're styling a component, you have a good understanding of what styles each of component's part requires and I wouldn't use modifier classes.