Placeholder inside list-group-item has insufficient height

[Krinkle]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

When using placeholders for list-group-item, the placeholder have a height of 33px, compared to the "real" elements have a height of 42px.

This is reproducible on the latest stable (Bootstrap 5.1.3) as well as on 5.2.0-beta1.

Reduced test cases

1. A placeholder (33px).
2. A real item (42px).
3. A placeholder with letter "X" as content to workaround this bug (42px).

<div class="container">
	<div class="col-lg-5 col-xl-4 order-1 order-lg-2 cs-reposlist placeholder-glow">
		<p class="h5">Matched repositories</p>
		<div class="list-group">
			<span class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"><span class="placeholder bg-secondary col-4"></span></span>
			<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" href="#">Bar</a>
			<span class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"><span class="placeholder bg-secondary col-6">x</span></span>
		</div>
	</div>
</div>

https://codepen.io/Krinkle/pen/dydwaEe?editors=1000

What operating system(s) are you seeing the problem on?

macOS, Linux

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.1.3

[florianlacreuse]

If you remove the css classes d-flex justify-content-between align-items-center on each list-group-item, you will get the expected height on these items. Placeholders will have the same current height. If you want bigger placeholders, you can use sizing modifiers: https://getbootstrap.com/docs/5.2/components/placeholders/#sizing

[mdo]

Closing per above comment.