JSFiddle - React, Tailwind, and code Playground

HTML

<!-- working solution -->
<div class="targetdiv">My Text that come out of div dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>

<!-- without the solution -->
<div class="targetdiv2">My Text that come out of div dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>

CSS

.targetdiv {
		   width: 190px;
		   border: 1px solid red;
		   white-space: pre-wrap;      /* CSS3 */   
		   white-space: -moz-pre-wrap; /* Firefox */    
		   white-space: -pre-wrap;     /* Opera <7 */   
		   white-space: -o-pre-wrap;   /* Opera 7 */    
		   word-wrap: break-word;      /* IE */
		}
	.targetdiv2 {
	        margin-top:20px;
		   width: 190px;
		   border: 1px solid red;

		}