Div bound to other div when browser window size changes

Question

I have the following problem:

the speech bubble should always point on the eye, regardless of the browser window size.

JSFiddle here

So far I have the following code:

<div class="container1">
    <div class="container2">
         <button class="eye"></button>
         <div class="speech-bubble">View</div>
    </div>
</div>

where

.container1 {
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    width: 100%; }

.container1 > .container2 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;}

.speech-bubble {
    position: absolute;}

But this does not work and produces the above output. What can I do to make it work? Please no jQuery solutions, since I use Angular.

Edit: If you omit the text-align: center, the code will achieve the desired effect. But not quite: I want to have the buttons centered! And still have the mentioned effect! How would I do that?

Answer 1

Managed to do it without much hackiness. Change .container2 to

.container1 > .container2 {
    margin: 0 auto;
}

see this fiddle.