How to span this text across? - html

Question

I have some text in a table cell in a table row that I'm trying to have the text span.
The text keeps on stopping in place.
This is what I currently have:
However this is what I want:
I want the text to span all way.
How would I implement this?
This is my code:
.normal-cell-styling-left-second {
width: 350px;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #E6E6E6;
}
.normal-cell-styling-middle-second {
width: 425px;
padding-left: 60px;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #E6E6E6;
}
.normal-cell-styling-right-second {
width: 700px;
padding-top: 20px;
padding-left: 200px;
padding-bottom: 20px;
border-bottom: 1px solid #E6E6E6;
}
.gray-dynamic {
display: inline-block;
background-color: #F6F8FA;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
border-radius: 4px;
margin-top: 5px;
margin-bottom: 5px;
font-weight: normal;
font-size: 16px;
font-family: 'PureHeadlineRegular', Sans-serif;
line-height: 19px;
color: #212121;
}
.image-placeholder5 {
display: inline-block;
width: 196px;
height: 36px;
background-color: #F1F1F1;
}
<table>
<tr>
<td className="normal-cell-styling-left-second">
<span class="gray-dynamic">
SHADOW_SPREAD_0
</span>
</td>
<td className="normal-cell-styling-middle-second">
0 0 0px 0 rgba(0,0,0,0.12) <br></br>0 0px 0px 0 rgba(0,0,0,0.24)
</td>
<td className="normal-cell-styling-right-second">
<div className="image-placeholder5"></div>
</td>
</tr>
<table>

Answer 1

Just put it in a span like your SHADOW_SPREAD
.normal-cell-styling-left-second {
width: 350px;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #E6E6E6;
}
.normal-cell-styling-middle-second {
width: 425px;
padding-left: 60px;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #E6E6E6;
}
.normal-cell-styling-right-second {
width: 700px;
padding-top: 20px;
padding-left: 200px;
padding-bottom: 20px;
border-bottom: 1px solid #E6E6E6;
}
.gray-dynamic {
display: inline-block;
background-color: #F6F8FA;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
border-radius: 4px;
margin-top: 5px;
margin-bottom: 5px;
font-weight: normal;
font-size: 16px;
font-family: 'PureHeadlineRegular', Sans-serif;
line-height: 19px;
color: #212121;
}
.image-placeholder5 {
display: inline-block;
width: 196px;
height: 36px;
background-color: #F1F1F1;
}
<table>
<tr>
<td className="normal-cell-styling-left-second">
<span class="gray-dynamic">
SHADOW_SPREAD_0
</span>
</td>
<td className="normal-cell-styling-middle-second">
<span class="gray-dynamic">
0 0 0px 0 rgba(0,0,0,0.12) <br>0 0px 0px 0 rgba(0,0,0,0.24)
</span>
</td>
<td className="normal-cell-styling-right-second">
<div className="image-placeholder5"></div>
</td>
</tr>
<table>

Answer 2

Modify the css
.table thead tr th td {
white-space:nowrap
}
Then use white-space-no-wrap in the table data style
<td style="white-space:nowrap;" className="normal-cell-styling-middle-second"> 0 0 0px 0 rgba(0,0,0,0.12) <br></br>0 0px 0px 0 rgba(0,0,0,0.24) </td>

Answer 3

Not sure, but it looks like there is a few things about table styling you are not familiar with :
vertical-align can be used on a cell to tell if the content is to centered, aligned on top or bottom without using padding or line-height for an average alignment. https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align (look farther down about table cells )
border-collapse or border-spacing can be used to avoid gaps in between cells border. see https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse & https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing might look similar but involves different behavior when drawing borders on a table.
table-layout:fixed can be used to set a fixed width to the table and the cells so they do not shrink/expand anymore. ( height cannot be set on a fixed value, table will not show scrollbars) this is the one thing to know about the table (or display:table / table-cell / ... properties) rendering behavior.
white-space can be used anywhere and you might know more about it https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Here is a snippet that could be closer to what you expect, do not hesitate to clarify your needs and misunderstandings of myself.
table{
border-spacing:0;/* or border-collapse:collapse; */
}
.normal-cell-styling-left-second {
width: 350px;
border-bottom: 1px solid ;
vertical-align:top;
}
.normal-cell-styling-middle-second {
width: 425px;
padding-left: 60px;/* needed ?*/
border-bottom: 1px solid ;
white-space:nowrap;
}
.normal-cell-styling-right-second {
border-bottom: 1px solid ;
}
.gray-dynamic {
display: inline-block;
background-color: #F6F8FA;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
border-radius: 4px;
margin-top: 5px;
margin-bottom: 5px;
font-weight: normal;
font-size: 16px;
font-family: 'PureHeadlineRegular', Sans-serif;
line-height: 19px;
color: #212121;
}
.image-placeholder5 {
display: inline-block;
width: 196px;
height: 36px;
background-color: #F1F1F1;
}
<table>
<tr>
<td class="normal-cell-styling-left-second">
<span class="gray-dynamic">
SHADOW_SPREAD_0
</span>
</td>
<td class="normal-cell-styling-middle-second">
0 0 0px 0 rgba(0,0,0,0.12) <br>0 0px 0px 0 rgba(0,0,0,0.24)
</td>
<td class="normal-cell-styling-right-second">
<div class="image-placeholder5"></div>
</td>
</tr>
<table>