Rating.js

/* ... */
import {Icon, Progress} from "semantic-ui-react";

export function Rating() {
  /* ... */
  return (
    <div className='rating'>
      <div className='thumbs-up'>
        <Icon name='thumbs outline up'/>
        <span>{props.likeCount}</span>
      </div>
      <div className='thumbs-down'>
        <Icon name='thumbs outline down'/>
        <span>{props.dislikeCount}</span>
      </div>
      {progress}
    </div>
  );
}

Rating.scss

.rating {
    display: inline-grid;
    grid: auto auto / max-content max-content;
    column-gap: 16px;
    grid-row-gap: 4px;
    .thumbs-up {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .thumbs-down {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .progress {
        grid-column: 1 / span 2;
        grid-row: 2 / 3;

        &.ui.progress:last-child {
            margin-bottom: 0;
        }
    }
}