docs: refactor quick align tip section in readme for better readability (#4399)

readme.md

@@ -80,6 +80,8 @@
     - [Demo](#demo-3)
 - [All Demos](#all-demos)
   - [Quick Tip (Align The Cards)](#quick-tip-align-the-cards)
+    - [Stats and top languages cards](#stats-and-top-languages-cards)
+    - [Pinning repositories](#pinning-repositories)
 - [Deploy on your own](#deploy-on-your-own)
   - [On Vercel](#on-vercel)
     - [:film\_projector: Check Out Step By Step Video Tutorial By @codeSTACKr](#film_projector-check-out-step-by-step-video-tutorial-by-codestackr)
@@ -691,7 +693,9 @@ Choose from any of the [default themes](#themes)
 
 ## Quick Tip (Align The Cards)
 
-By default, GitHub does not lay out the cards side by side. To do that, you can use this approach:
+By default, GitHub does not lay out the cards side by side. To do that, you can use such approaches:
+
+### Stats and top languages cards
 
 ```html
 <a href="https://github.com/anuraghazra/github-readme-stats">
@@ -702,15 +706,6 @@ By default, GitHub does not lay out the cards side by side. To do that, you can
 </a>
 ```
 
-```html
-<a href="https://github.com/anuraghazra/github-readme-stats">
-  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats" />
-</a>
-<a href="https://github.com/anuraghazra/convoychat">
-  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=convoychat" />
-</a>
-```
-
 <details>
 <summary>:eyes: Show example</summary>
 
@@ -721,7 +716,21 @@ By default, GitHub does not lay out the cards side by side. To do that, you can
   <img height=200 align="center" src="https://github-readme-stats.vercel.app/api/top-langs?username=anuraghazra&layout=compact&langs_count=8&card_width=320" />
 </a>
 
-***
+</details>
+
+### Pinning repositories
+
+```html
+<a href="https://github.com/anuraghazra/github-readme-stats">
+  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats" />
+</a>
+<a href="https://github.com/anuraghazra/convoychat">
+  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=convoychat" />
+</a>
+```
+
+<details>
+<summary>:eyes: Show example</summary>
 
 <a href="https://github.com/anuraghazra/github-readme-stats">
   <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats" />