Stor8

<!--
@FlowerlyRat wooo

Feel free to tweak the rounded corners by changing the border-radius
You can also change the outside border-width
You can add a color to the border by adding "border-color: hexcode or rgba value"

To change the dividers between boxes, just search whatever is between the "dividers" commentary
-->
<div class="card" style="border-radius: 40px; border-width: 2px; overflow: hidden">
<div class="row no-gutters">
    
    <!--////// MUSIC + LYRICS BOX //////-->
    <div class="col-md-auto order-md-3">
        
        <!--/// Music ///-->
        <div class="card p-3 border-0 rounded-0 bg-faded">
            <div class="row no-gutters align-items-center">
                
                <!-- Album pic -->
                <div class="col-md-auto justify-content-center mb-md-0 mb-3">
                    <img src="
                    
                    https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
                    
                    " style="height: 120px; width: 120px">
                </div>
                <!-- Album pic end -->
                
                <!-- Embed + title -->
                <div class="col-md justify-content-center text-center col-12" style="width: 0%">
                    
                    <div class="col my-auto" style="width: 280px" data-toggle="tooltip" title="
                    
                    Song - by artist
                    
                    "><!-- Tooltip of the song and artist above for if it ever gets truncated-->
                        <p class="text-truncate mb-2"><b>
                            
                            Song title
                            
                            </b><span style="font-style: oblique">
                            
                            - artist
                            
                        </span>
                        </p>
                        <audio controls="" style="width: 250px"><source src="
                        
                        MP3_LINK
                        
                        "></audio>
                    </div>
                </div>
                <!-- Embed + title end -->
                
            </div>
        </div>
        <!--/// Music end ///-->
        
        <!-- Divider -->
        <div class="card rounded-0" style="width: 100%; border-width: 1px"></div>
        <!-- Divider -->
        
        <!--/// Lyrics ///-->
        <div class="card p-3 border-0 rounded-0 bg-faded text-muted" style="height: 500px; scrollbar-width: thin; overflow: auto">
            
            <p>
                Cool lyrics here wowowowowo<br>
                this is incredible frfrfr woaaaaa
            </p>
            <p>
                Po-pi-po-pi-po-po-pi-po<br>
                Po-pi-po-pi-po-po-pi-po<br>
                Po-pi-po-pi-po-po-pi-po<br>
            </p>
            
        </div>
        <!--/// Lyrics end ///-->
        
    </div>
    <!--////// MUSIC + LYRICS BOX end //////-->
    
    <!-- Divider -->
    <!-- computer ver -->
    <div class="card rounded-0 hidden-sm-down order-2" style="border-width: 1px"></div>
    <!-- phone ver -->
    <div class="card rounded-0 hidden-sm-up" style="width: 100%; border-width: 1px"></div>
    <!-- Divider -->
    
    <!--////// DESCRIPTION BOX //////-->
    <div class="col-md  order-md-1">
        <div class="card p-3 border-0 rounded-0 bg-faded" style="height: 654px; scrollbar-width: thin; overflow: auto">
            
            <p>
                Very cool and swag description!!!!
            </p>
            <p>
                Text box scrolls when it gets to the end
            </p>
            
        </div>
    </div>
    <!--////// DESCRIPTION BOX end //////-->
    
</div>
</div>
<a href="https://toyhou.se/FlowerlyRat" class="tooltipster text-secondary justify-content-end" title="Code by FlowerlyRat"><i class="fas fa-code"></i></a>