CSS texts from different divs to flow - css

Question

Let's say I have the following divs: JSFIDDLE
<div>
<div class="first">Hello My name is </div>
<div class="second">Something else</div>
</div>
Under a max-width, the first part and second part breaks away to next line. Is there a way to keep the words next to each other?

Answer 1

See the Solution Below
just add display:table; to .genral and display:table-cell; and white-space:nowrap; to .first, .second
.general {
background: #ebeff1;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
margin-bottom: 16px;
max-width: 205px;
display: table; /*Changed*/
}
.first {
margin-right: 7px;
}
/*New Added*/
.first, .second{
display: table-cell;
white-space: nowrap;
}
p.pp {
font-size: 24px;
}
<p class="pp">
When overflow, the words go to next line: Not good.
</p>
<div class="first_sample general">
<div class="first">Hello My name is </div>
<div class="second">something else</div>
</div>
<p class="pp">
If there is a space, then words simply flow to next each other: Good.
</p>
<div class="second_sample general">
<div class="first">Hello My name is </div>
<div class="second">something</div>
</div>
<p class="pp">
The look I am trying to achieve:
</p>
<div class="third_sample general">
<div class="first">Hello My name is something else </div>
</div>

Answer 2

Just use display: inline or inline-block in your first and second divs.
.general {
max-width: 200px;
}
.first,
.second {
display: inline;
}
<div class="first_sample general">
<div class="first">Hello My name is </div>
<div class="second">something else</div>
</div>

Answer 3

You can use white-space:nowrap; property.
.general {
background: #ebeff1;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
margin-bottom: 16px;
max-width: 205px;
display: flex;
}
.first {
margin-right: 7px;
white-space:nowrap;
}
.second {
white-space:nowrap;
}
p.pp {
font-size: 24px;
}
<p class="pp">
When overflow, the words go to next line: Not good.
</p>
<div class="first_sample general">
<div class="first">Hello My name is </div>
<div class="second">something else</div>
</div>
<p class="pp">
If there is a space, then words simply flow to next each other: Good.
</p>
<div class="second_sample general">
<div class="first">Hello My name is </div>
<div class="second">something</div>
</div>
<p class="pp">
The look I am trying to achieve:
</p>
<div class="third_sample general">
<div class="first">Hello My name is something else </div>
</div>

Answer 4

.general {
background: #ebeff1;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
margin-bottom: 16px;
max-width: 405px;
display: inline-block;
}