<div id="root"></div>
body {
  background: #202020;
  box-sizing: border-box;
  font-family: Menlo, Monaco, sans-serif;
}

#root {
  padding: 30px;
  display: flex;
}


.blue-wrapper {
  display: flex;
  min-width: 300px;
  max-width: 300px;
  flex-wrap: wrap;
  margin: auto;
  background: #066ace;
  padding: 15px;
  border-radius: 5px;
  overflow: hidden;
  text-overflow: ellipse;
  
  input {
    margin: 15px;
    border-radius: 3px;
    border: none;
    font-size: 30px;
    font-weight: bold;
    height: 40px;
    text-align: center;
  }
  
  .base {
    max-width: 100px;
    flex: 0 0 100px;
    margin: 60px auto;
    font-size: 50px;
    height: 60px;
  }
  
  .exponent {
    max-width: 60px;
    flex: 0 0 30px;
    margin: auto;
    margin: 15px auto auto 0;
  }

  .result {
    flex: 1 0 100%;
    margin-top: 15px;
    text-align: center;
    color: #fdca40;
    font-size: 40px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
View Compiled
const ExponentCalculator = () => {
  const [base, setBase] = React.useState(4);
  const [exponent, setExponent] = React.useState(4);
  const result = (base ** exponent).toFixed(2);
 
  const handleBaseChange = (e) => {
    e.preventDefault();
    setBase(e.target.value);
  }
  
  const handleExponentChange = (e) => {
    e.preventDefault();
    setExponent(e.target.value);
  }
  
  return (
    <div className="blue-wrapper">
      <input
        type="number"
        className="base"
        onChange={handleBaseChange}
        placeholder="Base"
        value={base}
      />
      <input
        type="number"
        className="exponent"
        onChange={handleExponentChange}
        placeholder="Exp."
        value={exponent}
      />
      <h1 className="result">
        {result}
      </h1>
    </div>
  );
};

ReactDOM.render(<ExponentCalculator />, document.getElementById('root'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react@16.7.0-alpha.0/umd/react.production.min.js
  2. https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js