Make ToastContainer compatible with RTL layout (#8230)

* Fix _ToastContainer.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Improve existing rules

- Use properties available for flexbox
- Align the title of the toast to the center

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Set the count indicator on the end side of the div

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove the vertical-align property since it has no longer effect

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

src/components/structures/ToastContainer.tsx

@@ -79,7 +79,7 @@ export default class ToastContainer extends React.Component<{}, IState> {
                 titleElement = (
                     <div className="mx_Toast_title">
                         <h2>{ title }</h2>
-                        <span>{ countIndicator }</span>
+                        <span className="mx_Toast_title_countIndicator">{ countIndicator }</span>
                     </div>
                 );
             }