Use flexbox instead of float for layout of collapsible sections

src/components/CollapsibleSection.js

@@ -35,7 +35,15 @@ export class CollapsibleSection extends Component {
 
     return (
       <>
-        <div>
+        <div className={classes.container}>
+          <Typography
+            className={classes.heading}
+            id={id}
+            onClick={this.toggleSection}
+            variant="overline"
+          >
+            {label}
+          </Typography>
           <MiradorMenuButton
             aria-label={
               t(
@@ -48,14 +56,6 @@ export class CollapsibleSection extends Component {
           >
             {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
           </MiradorMenuButton>
-          <Typography
-            className={classes.heading}
-            id={id}
-            onClick={this.toggleSection}
-            variant="overline"
-          >
-            {label}
-          </Typography>
         </div>
         {open && children}
       </>

src/containers/CollapsibleSection.js

@@ -5,9 +5,12 @@ import { CollapsibleSection } from '../components/CollapsibleSection';
 
 const styles = {
   button: {
-    float: 'right',
     padding: 0,
   },
+  container: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
   heading: {
     cursor: 'pointer',
   },