JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<body>
  <h1>Hello, world!</h1>

  <div class="container-fluid">
    <div class="input-group prompt" col-xs-2>
      <span class="input-group-addon">Prompt</span>
      <input type="text" class="form-control tts-prompt" placeholder="Text to Speech Prompt!!" />

      <span class="input-group-addon prompt-audio">
						<div class="btn-link prompt-audio-control" >
							<div class="btn-file">
              <input type="file"       accept="audio/wav|audio/pcm|audio|vox"></input>
								<span> Upload </span>
              </div>
            </div>
            <div class="btn-link prompt-audio-control" >
							<div class="btn-file">
              <input type="file"       accept="audio/wav|audio/pcm|audio|vox"></input>
								<span> Delete </span>
              </div>
            </div>
            <a class="PlayPromptIcon" target="_blank"> <span class="glyphicon glyphicon-volume-up"></span></a>
          </span>

      </div>
  </div>

</body>

CSS

.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=0);
    opacity: 0;
    cursor: inherit;
    display: block;
}
.PlayPromptIcon,
PlayPromptIcon:visited {
  color: grey;
}

.PlayPromptIcon:hover {
  text-shadow: 1px 1px 10px black;
}

.prompt-audio-control {
  display: none;
  padding: 0;
  margin: 0;
  margin-right: 16px;
}

.prompt-audio:hover .prompt-audio-control {
  display: inline-block;
}