Horizontal scrolling without using JS - pure CSS only

scrolling.css

.list_of_cards {
    /* This is the important part */
    flex-wrap: nowrap; /* to make sure in mobile view, cards appear in row */
    overflow-x: auto; /* to add scrollbar or not */
    align-items: center;
    -webkit-overflow-scrolling: touch; /* magic for safari */
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* Add your own styling to your cards here */

.profile_card {
    /*flex: 0 0 auto;*/ /* this should be there only for non scrolling view i.e. desktop */
    width: 213px;
    border-radius: 8px;
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
    margin: 1em;
    background: white;
}

.profile_image {
    width: 215px;
    height: 120px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    object-fit: cover;
}

.name {
    font-weight: 700;
    font-size: 1.678em;
    margin: 0.5em 0.5em 0 0.4em;
}

.title {
    font-weight: 400;
    font-size: 1.33em;
    margin: 0 0.5em 0.5em 0.5em;
}

.description {
    font-weight: 400;
    font-size: 1.33em;
    margin: 0 0.5em 0.5em 0.5em;
}

.read_more {
    margin: 0.6em;
}
.read_more a{
    font-weight: 400;
    font-size: 1em;
    color: #0960C6;
    text-decoration: none;
}

scrolling.html

<div class="list_of_cards" id="one_div">
	{% for celeb in music %} 
	<!-- This is a django template tag, replace this with your own framework -->
		<div class="profile_card">
			<img src="{{ celeb.image.url }}" class="profile_image">
			<p class="name">{{ celeb.name }}</p>
			<p class="title">{{ celeb.title }}</p>
			<p class="description">{{ celeb.description }}</p>
			<p class="read_more">
				<a href="{% url 'social:begin' 'facebook' %}">Sign up</a>
			</p>
		</div>
	{% endfor %}
</div>