Hiding dropdown text on mobile etc

[brutalist]

I have an essay where I want to add extra dropdown text to main paragraphs. I want to be able to click on a down arrow and have extra text float over the top of the main text.
I prefer a clickable button rather than a hover, because on the mobile, I want to be able to click the same arrow and minimise the text again.
Its a simple thing, but this is the first time I have had to ask for help. This is the closest I have managed, which isn't close at all;

<style>
.dropdown {
position: relative;
display: inline-block;
}

.dropbtn {
background-color: white;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown-content {
display: none;
position: absolute;
overflow:auto;
background-color: white;
font-size: 80%;



<div class="dropdown" style="float:left;">
<button class="btn dropdown-toggle" id="dlDropDown" data-toggle="dropdown" data-bind="enable: !noResults()">
<img src="1024px-Vector_down_arrow_link.svg.png" width="26px"></button>

<div class="dropdown-content" style="left:0;">
min-width: 310px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: white}
.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: white;
}