CSS Editor: changing the height of an element

In the SiteOrigin CSS editor, I highlight an element named .wpdiscuz-post-rating-wrap.wpd-custom-field. A rectangular box is displayed in blue. Let’s say the height measures 3 inches.
These are the .wpd-custom-field declarations displayed in the editor:
display: table
border: 0

The element inside .wpd-custom-field is named .wpd-rating. If I highlight wpd-rating, now I see the same size rectangle, except there is a narrow aqua bar across the top and across the bottom. The center area for the .wpd-rating element is still blue.
These are the .wpd-rating declarations displayed in the editor:
display: flex
border: 0

Let’s say the top and bottom aqua bars measure 1/2 inch each and the blue center measures 2 inches (1/2+1/2+2=3 inches).

I want to eliminate this unnecessary 1/2 inch space above and below the data.

Using the CSS Editor, how can I decrease the height of the .wpd-custom-field element so it is the same height as the .wpd-rating element (2 inches)?

Here’s a link to the webpage: https://virtualrdn.com/banana-chocolate-chip-buckwheat-pancakes/