Help with simple (I think) issue

I recently took over the job of Director of Technology for a medium-sized independent school. First, let me say I know basically no CSS at all, but I’m a quick study. I have been bugged by the way our staff contact page looks for a while. Problem #1 was that each staff member’s div wrapper was a different height. I fixed this by changing div.staff-member to include height=330px instead of a relative number. Problem #2 is that now all the staff members seem to have different padding around the top/bottom. I’m sure it’s something fairly obvious, but as I said, I’m a complete novice with CSS.

Here is the page:
https://stfrancisschool.org/the-basics/faculty-staff/

Here is the [staff-loop]

[staff_loop]
	<img class="staff-member-photo" src="[staff-photo-url]" alt="[staff-name] : [staff-position]">
	<div class="staff-member-info-wrap">
		<a href="mailto:[staff-email]" />[staff-name-formatted]</a>
		[staff-position-formatted]</div>

[staff-email]<br>
[staff-phone]<br>
[staff-bio-formatted]
[/staff_loop]

And here is the CSS

/*  div wrapped around entire staff list  */
div.staff-member-listing {

}

/*  div wrapped around each staff member  */
div.staff-member {
        border-radius: 8px;
display: inline-block !important;

        border: thin solid #ccc;
        padding: .8em;

       width: 30%;
// height:80%;
height:330px;

}

/*  "Even" staff member  */
div.staff-member.even {
         margin-top: 1em;
}

/*  "Odd" staff member  */
div.staff-member.odd {
        margin-top: 1em;
}

/*  Last staff member  */
div.staff-member.last {

}

/*  Wrap around staff info  */

.staff-member-info-wrap {
 display: inline-block !important;

  //      padding: .3em;
      position: relative;
// background-color:yellow;
        float: right;
        font-size: 1em;
     width: 55%;
 //       top: -2%;
  //      left: 105%;
// display: none;

}

/*  [staff-bio-formatted]  */
div.staff-member-bio {

}

/*  p tags within [staff-bio-formatted]  */
div.staff-member-bio p {
margin-top:10px;
font-size:12px;
}

/*  [staff-photo]  */
img.staff-member-photo {
        float: left;
}

/*  [staff-photo]  */
img.staff-member-photo-overlay {
        float: left;
margin: 6px;
}

/*  [staff-email-link]  */
div..staff-member-email {
font-size:8px;

}

/*  [staff-name-formatted]  */
div.staff-member-listing h3.staff-member-name {
        margin: 0;
font-size:20px;
}

/*  [staff-position-formatted]  */
div.staff-member-listing h4.staff-member-position {
        margin: 0;
        font-style: italic;
       font-size:11px;
}

/* Clearfix for div.staff-member */
div.staff-member:after {
        content: "";
        display: block;
        clear: both;
}

/* Clearfix for <= IE7 */
* html div.staff-member { height: 1%; }
div.staff-member { display: block; }

Any suggestions as to what’s going on would be great. Thanks!

https://www.ads-software.com/plugins/simple-staff-list/