如何对齐ul标签中相同起点的img和video标签？

Question

选择文件后，我使用React来显示图像和视频标签列表 但是，img标签和视频标签在html中的起始位置不同

enter image description here

这是我的css

.PictureInfo {
  width: 300px;
  height: 100px;
  overflow-x: scroll;
  white-space: nowrap
}

.PictureInfo > li {
  display: inline-block;
  zoom: 1
}


.PictureInfo > li > img {
  width: 100px;
  height: 100px;
  margin: 3px;
}

.PictureInfo > li > video {
  width: 100px;
  height: 100px;
  margin: 3px;
}

这是我的反应代码的一部分。

  return photos.map(async(photo, key) => {

      if (photo.indexOf("image/jpeg") != -1) {
        return (
          <li key={key}>
            <img key={key} src={photo} className='rotate90'/>
          </li>
        );
      }
      else if (photo.indexOf("video/mp4") != -1) {
        return (
          <li key={key}>
            <video controls>
              <source src = {photo} type="video/mp4">
              </source>
            </video>
          </li>
        );
      }
   }

这是在渲染中

  <ul className = "PictureInfo">
        {this.state.photoList}
  </ul>

如何将ul标签中相同起点的img和视频标签对齐？