fixed alignment of titles

public/styles.css

@@ -98,6 +98,7 @@ div.audiocard {
   text-align: left;
   padding: 15px;
   border-radius: 15px;
+  height: fit-content;
 }
 
 div.audiocard-floating-left {

template-music.html

@@ -28,6 +28,7 @@
 
     <h2 id="djent">djent</h2>
 
+    <div style="display: flex;">
         <div class="audiocard audiocard-floating-left">
             <img class="albumcoversmall"
                 src="https://archive.org/download/mbid-b0aba2a0-c210-4201-992e-0c5cc4069321/mbid-b0aba2a0-c210-4201-992e-0c5cc4069321-28191981668_thumb250.jpg"
@@ -44,8 +45,13 @@
 
         <p>{{djent-paragraph}}</p>
 
+    </div>
+
     <h2 id="metalcore">metalcore</h2>
 
+    <div style="display: flex;">
+        <p>{{metalcore-paragraph}}</p>
+
         <div class="audiocard audiocard-floating-right">
             <img class="albumcoversmall"
                 src="https://archive.org/download/mbid-886f742e-0bb9-4aad-992b-f43b39f6e054/mbid-886f742e-0bb9-4aad-992b-f43b39f6e054-26050116040_thumb250.jpg"
@@ -59,8 +65,7 @@
                 </audio>
             </div>
         </div>
-
+    </div>
-    <p>{{metalcore-paragraph}}</p>
 
     <h3>invent animate</h3>