How to show an empty DIV with dynamic width?

Question

how can I make an empty DIV or SPAN to be shown and grow or shrink according to the content of the others?

This is what I have until now:

.text{
	float:left;
	display:inline-block;
}
.borda{
	display:inline-block;
	background-image: url('borda.png');
	background-repeat:repeat-x;
	background-position:center bottom;
	float:left;
	margin:30px 0 0 5px;
	empty-cells: show;"
}
.numbers{
	float:right;
	display:inline-block;
}

<div>
<span class="text">Text Text Text</span><span class"borda"></span><span class="numbers">Numbers</span>
</div>

Answer 1

You can use the CSS3 flexbox specifications. Simply allow the .borda container to grow, i.e. flex-grow: 1. I have changed the background colours to show contrast. There is some error with your markup, including the missing = for the class assignment for .borda.

div {
  display: flex;
}
.text {
  background-color: #eee;
}
.borda {
  background-color: #333;
  flex-grow: 1;
}
.numbers {
  background-color: #eee;
}

<div>
  <span class="text">Text Text Text</span><span class="borda"></span><span class="numbers">Numbers</span>
</div>