@Ilnicki010 thanks for taking this task. I made a couple small changes (adding hot reload so it's easier to tweak the component without a page refresh and enforced some stylelint rules).

I think there a two main things to try and solve here:

1. I'd like the component to flow inline with the text so it reads as a sentence, only the last word happens to be a Select element, this is especially tricky when switching between device sizes (see screenshot of smaller devices attached);

2. I'd like to be able to style it so that it "blends in" with the sentence as much as possible, I think the only way to achieve that is by using a completely custom component, it seems like React Select is the one option out there with most usage.

Let me know if you'd like to give this one another go or I can take it otherwise. Thanks!

And that seems to work, see this fiddle: https://jsfiddle.net/rlueder/982oegbz/23/ :)

The flow of the Select component works for most screen sizes, as the window is resized it might still fall off screen but I think that's an edge case:

The position of the menu is now correct, it took quite some overwrites with !important rules to get it just right...

There is one main issue left before closing/merging this PR:

• as the paragraph becomes longer/shorter depending on the value of Following__total the Select component might be overlapped by text (see screenshot below), I think the fix is to recalculate position of Select with each option selected on the menu, or with each update of Following__total I think either would work

I actually just found another issue, the top property of Select__menu should take into account the height of Following__intro so the following rule hast to change:

.Select__menu {
  top: calc(
    #{$select_height} * 2 + 3px
  ); // to compensate for Select__control border-bottom
}

hmm now getting a lot of these when resizing the window:

I made progress, a few things remaining I want to finish today still:

1. if the Select component is not completely in view it should not attach to position of :after element, I'll use the intersection observer API to determine this;

2. If an option in the menu returns "0" accounts, time frame options after this option should not be displayed (e.g. if "3 months" returns 0 then, 6 months and one year should not be an option in the list, as they would necessarily also be 0), the total number would have to be calculated beforehand and not on selection as it happens now.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
https://blog.arnellebalane.com/the-intersection-observer-api-d441be0b088d