Automatically break a slot and maintain alignment to the right

Question

I have label, and spanin a div, where the content spanis dynamic. The label should always be right-aligned, and if there is not enough space in the line for its contents, it should automatically break into the next line and keep its alignment on the right side.

Initial situation:

After changing the contents span:

What it should look like:

Playground: https://jsfiddle.net/hj9zstjc/1/

Is there a solution for this?

flexbox, span , , , .

Answer 1

span
{
   display: inline-block;
   float: right;
}

clearfix

.wrapper 
{
  overflow: auto;
}

https://jsfiddle.net/The_Freedom/hj9zstjc/2/

Answer 2

Flexbox

var input = $('input');
input.on('input', function() {
	$('span.value').text(input.val() + "€");
});

.wrapper {
  width: 130px;
  border: 1px solid black;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
}

label {
  flex: 1;
}

span.value {
  margin-left: auto;
  word-break: break-all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="200">
<div class="wrapper">
  <label>Gesamtpreis:</label>
  <span class="value">200 €</span>
</div>

Hide result

Answer 3

:

.wrapper {
  width: 130px;
  border: 1px solid black;
  margin-top: 8px;
}
.wrapper::after {
  content: '';
  display: block;
  clear: both;
}

span.value {
  text-align: right;
  float: right;
}

: https://jsfiddle.net/0g8e081f/

Answer 4

, :

https://jsfiddle.net/hj9zstjc/4/

overflow:auto;

.wrapper

float:right;

.