Padding on markdown blocks when going over two lines on mobile

Site URL: https://www.boutique14.co.uk/home1

Hi,

Bit of a tricky one (for me). On this page: https://www.boutique14.co.uk/home1 I have three markdown boxes underneath images. On desktop they look fine (see attached image). They are the ones with a pink background saying "Personal Service";  "Custom Samples"; "Matching Stationery".

However, on a screen size where the text goes over onto two lines the markdown box obviously changes shape to accommodate. This can be on any device, but a good example is on mobile in landscape (see second attached image). This throws out the visuals on this section of the page and looks messy.

Is there some way I can CSS it so that if one box goes over onto two lines then they all do? 

Thanks.

You can set same height for 3 boxes, add to Home > design > Custom CSS

body#collection-5e94620e3f49493c11943980 .markdown-block {
      min-height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
}

Thank you as ever. Is there any way I can keep the height of the blocks at 18px in normal layout and achieve the same effect? 50px is a bit too deep when the text is all on one line. Thanks. (You're great by the way).