how to make size of speech box auto

Question

I had created A speech box but I face problems in it I can't able to make a speech box change its size(height and width) automatically according to need. It should acquire space according to its content. If the content in it is large box size should fix in it If the content is small box should auto reduce in size

.hide {
  display: none;
}

.speech {
  position: absolute;
  left: 0;
  top: -22rem;
  width: 400px;
  height: 300px;
  text-align: center;
  line-height: 100px;
  background-color: #fff;
  border: 8px solid #ff5733;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  display: none;
}

.speech:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 38px;
  top: 300px;
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}

.speech:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  top: 300px;
  border: 25px solid;
  border-color: #ff5733 transparent transparent #ff5733;
}

.myDIV {
  position: relative;
}

.myDIV:hover .speech {
  display: block;
  color: green;
}

<h2>Display an Element on Hover</h2>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<span><span>
hello buddy how do you do <span class="myDIV"> Hover over me.<span class="speech">I am shown when someone hovers over the div above.<p>Other content</p>
<p>Other content</p>
<p>Other content</p></span></span></span> well I am moe optional
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<span><span>
hello buddy how do you do <span class="myDIV"> Hover over me.<span class="speech">I am shown when someone hovers over the div above.</span></span></span> well I am moe optional

Answer 1

Below the updated code. Check the comments:

.hide {
  display: none;
}

.speech {
  position: absolute;
  left: 0;
  /*top: -22rem; removed*/
  bottom:calc(100% + 33px); /* added */
  width: 400px;
  /* height: 300px; removed */
  text-align: center;
  line-height: 100px;
  background-color: #fff;
  border: 8px solid #ff5733;
  border-radius: 30px;
  box-shadow: 2px 2px 4px #888;
  display: none;
}

.speech:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 38px;
  /*top: 300px; removed*/
  top:100%; /* added */
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}

.speech:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  /*top: 300px; removed*/
  top:100%; /* added */
  border: 25px solid;
  border-color: #ff5733 transparent transparent #ff5733;
}

.myDIV {
  position: relative;
}

.myDIV:hover .speech {
  display: block;
  color: green;
}

<h2>Display an Element on Hover</h2>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<span><span>
hello buddy how do you do <span class="myDIV"> Hover over me.<span class="speech">I am shown when someone hovers over the div above.<p>Other content</p>
<p>Other content</p>
<p>Other content</p></span></span></span> well I am moe optional
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<span><span>
hello buddy how do you do <span class="myDIV"> Hover over me.<span class="speech">I am shown when someone hovers over the div above.</span></span></span> well I am moe optional