How to make text that has more width then its container to move left, not right in IE 11?

I have a text in the div with 5px margin-right. If the container div becomes narrow the text moves out of the container and there is no 5px margin anymore. Is it possible to keep this margin from the right and make text go out from the left side of the container, not right? Adding display: flex;justify-content: flex-end; to box element works in Chrome, but not IE 11

Here is the sample

.box {
  margin-bottom: 15px;
  margin-left: 30px;
  background-color: red;
  width: 170px;
  white-space: nowrap;
  text-align: right;
}

.text {
  margin-right: 5px;
}

.box2 {
  width: 50px;
}

<div class="box box1"><div class="text">Sample text</div></div><div class="box box2"><div class="text">Sample text2</div></div>