<script>
  export let name;
  export let value;
</script>

<div class="subgoal-input">
  <div><input type="text" bind:value={name} /></div>
  <div><input type="text" bind:value={value} /></div>
</div>

<style>
  div.subgoal-input {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  div.subgoal-input div {
    line-height: 1em;
    margin-bottom: 0 !important;
  }

  div.subgoal div {
    display: inline-block;
    box-sizing: border-box;

    padding: 0.5em;
  }
  div.subgoal-input div:first-of-type {
    width: 75%;
  }
  div.subgoal-input div:last-of-type {
    width: 25%;
  }

  div.subgoal-input input {
    margin-bottom: 0 !important;
    border-bottom: 1px solid #333;
  }
  div.subgoal-input div:first-of-type input {
    border-right: 1px solid #333;
  }
</style>