Fix agree/disagree alignment in medium screens

Using the `flex-with-gap` mixin we avoid the left margin in the second
element when the screen space isn't wide enough to show both buttons.

Setting the margins with CSS also allows as to simplify the view and
makes it easier to customize styles.

app/assets/stylesheets/in_favor_against.scss

@@ -1,4 +1,9 @@
 .in-favor-against {
+  @include flex-with-gap($line-height / 4);
+
+  @include breakpoint(medium) {
+    @include flex-with-gap($line-height * 3 / 4);
+  }
 
   &,
   .in-favor,
@@ -84,12 +89,4 @@
   .no-voted {
     opacity: 0.3;
   }
-
-  .against {
-    margin-left: $line-height / 4;
-  }
-
-  .divider {
-    margin: 0 rem-calc(6);
-  }
 }

app/components/shared/in_favor_against_component.html.erb

@@ -12,8 +12,6 @@
     <span class="percentage"><%= votes_percentage("likes", votable) %></span>
   </div>
 
-  <span class="divider"></span>
-
   <div class="against">
     <%= button_to polymorphic_path(votable, action: :vote, value: "no"),
         class: "unlike #{voted_classes[:against]}",