How to add extra CSS when an image is uploaded? And how to make user only bolding/italicizing/underlining things that are highlighted?

Question

I want to add images, but when I add them, the text box moves and is not completely in the gray area (the div). I want the gray area to expand by a certain amount when an image is uploaded. I am not sure, but I think that Javascript would work and help solve this problem. I also was wondering how to bold specific things, as right now my code bolds everything. For example, if a user highlighted a word and the selected bold, then the specific word would bold. Right now, it is bolding/italicizing/underlining everything. Thanks!

let cssProps = {
  'font-weight': '',
  'font-style': '',
  'text-decoration': ''
}

$('input[name="textStyle"]').change(function() {
  const val = $(this).val()
  if ($(this).is(':checked')) {
    switch (val) {
      case 'bold':
        cssProps['font-weight'] = 'bold';
        break;
      case 'italic':
        cssProps['font-style'] = 'italic';
        break;
      case 'underline':
        cssProps['text-decoration'] = 'underline';
        break;
    }
  } else {
    switch (val) {
      case 'bold':
        cssProps['font-weight'] = '';
        break;
      case 'italic':
        cssProps['font-style'] = '';
        break;
      case 'underline':
        cssProps['text-decoration'] = '';
        break;

    }
  }
  $('textarea[name="styledText"]').css(cssProps)
});
var loadFile = function(event) {
   var image = document.getElementById('output');
   image.src = URL.createObjectURL(event.target.files[0]);
};

    body {
  background-color: #5f5959;
  color: #000000;
}

textarea[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea[type=submit] {
  width: 100%;
  background-color: #f9f9f9;
  color: 000000;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

textarea[type=submit]:hover {
  background-color: #908989;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  display: inline-block;
}
.button {
  background-color: #393737;
  border-radius: 4px;
  color: #f9f9f9;
  border-style: solid;
  border-width: 2px;
  border-color: #393737;
  width: 130px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: auto;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}
#file {
  background-color: #393737;
  border-radius: 4px;
  color: #f9f9f9;
  border-style: solid;
  border-width: 2px;
  border-color: #393737;
  width: 130px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: auto;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 10px;
}
input[type="file"] {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="margin-left: 20px;">
    <p><input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)" style="display: none;"></p>
    <p><label id="file" for="file" style="cursor: pointer; margin-bottom: 2px;">Upload Title Image</label></p>

    <script>

    </script>
    <form style="font-family: 'Poppins', sans-serif; color: #000000 padding-left: 100px;">
      Bold:<input name="textStyle" type="checkbox" value="bold" />
      <br> Italic:
      <input name="textStyle" type="checkbox" value="italic" />
      <br> Underline:
      <input name="textStyle" type="checkbox" value="underline" />
    </form>
</div>

<div style="margin-left: 55px; width: 1000px; height: 680px;">
  <p><center style="font-family: 'Poppins', sans-serif; font-size: 13px;">When submit, your text will clear and your blog will be published!</center></p>
  <textarea type="text" placeholder="Title" style="font-family: 'Poppins', sans-serif;"></textarea>
  <form style="font-family: 'Poppins', sans-serif;">
    <img id="output" width="200"/><textarea name="styledText" type="text" style="font-family: 'Poppins', sans-serif; border-width: 2px; border-style: solid; outline: none; border: none; height: 445px;"></textarea>
    <input style="height: 50px; width: 1000px; font-family: 'Poppins', sans-serif; border-radius: 7px;" value="Submit" type="submit">
  </form>
</div>