Positioning elements around element - html

Question

I need to position elements on a side like in the image above and have onclick function on them to show the corresponding text. Any info on how to best achieve this to be responsive?
By responseive i mean that the dots and text should always stay on the same position relative to the size of the bottle.
What I did was to put everything inside the container div and then positioned the elements relative to that div and the bottle image absolute to the container div.
It kinda works when container div has fixed dimensions, but I guess there are better ways to do it.
EDIT: Added code! I suck at formatting, sorry.
<div class="bottle-one">
<div class="bottle-one-content">
<div class="bottle-one-image">
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
</div>
<a href="#msg1" class="droplet droplet1 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg2" class="droplet droplet2 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg3" class="droplet droplet3 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg4" class="droplet droplet4 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<img src="assets/images/bottle1.png" alt="" class="bottle-one-bottle">
</div>
</div>
.bottle-one {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 30%;
}
.bottle-one-image {
height: 100%;
position: relative;
width: 251px;
}
.message {
left: -340px;
top: 180px;
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
text-transform: uppercase;
font-size: .7rem;
color: #004197;
height: 30px;
width: 400px;
margin-bottom: 1rem;
}
.message-hidden {
display: flex;
}
.message-hidden div:nth-of-type(1) {
text-align: right;
font-family: 'BrandonGrotesqueWeb-Black', sans-serif;
letter-spacing: 2px;
border-right: 1px solid #004197;
width: 70%;
}
.message-hidden div:nth-of-type(2) {
width: 30%;
display: flex;
overflow:hidden;
}

Answer 1

I came up with this to help you with aligning your element to the left of a div.
By using a mix of [psuedo-elements] and floats, I think this gives you the desired effect you are looking for. Post your code and I'll be more then happy to help you with the other part.
html {
width: 550px;
border: none;;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
height:200px;
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.sibling {
border: 3px solid red;
height:200px;
}
.sibling.root:after {
content: 'Sibling';
color: green;
}
.float {
float: left;
border: 3px solid blue;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'floated Element';
color: red;
}
.root {
overflow: hidden;
}
<div class="float">
</div>
<div class="sibling root">
</div>