import * as React from 'react';

export interface ScoreBoxProps {
  score: number | null,
  bid: number | null,
  tricks: number | null
};

const border = '1px solid black';

export default class extends React.Component<ScoreBoxProps, {}> {
  render() {
    return (
      <div style={{display: 'flex'}}>
        <div style={{border: border, boxSizing: 'border-box', width: '50%'}}>{this.props.score}</div>
        <div style={{boxSizing: 'border-box', width: '50%'}}>
          <div style={{border: border}}>{this.props.bid}</div>
          <div style={{border: border}}>{this.props.tricks}</div>
        </div>
      </div>
    );
  }
};

import * as React from 'react';

export interface ScoreBoxProps {
  score: number | null,
  bid: number | undefined,
  tricks: number | undefined
};

const border = '1px solid black';

export default class extends React.Component<ScoreBoxProps, {}> {
  render() {
    return (
      <div style={{display: 'flex'}}>
        <div style={{border: border, boxSizing: 'border-box', whiteSpace: 'pre-wrap', width: '50%'}}>{this.props.score !== null ? this.props.score : ' '}</div>
        <div style={{boxSizing: 'border-box', width: '50%'}}>
          <div style={{border: border, textAlign: 'center', whiteSpace: 'pre-wrap'}}>{this.props.bid !== undefined ? this.props.bid : ' '}</div>
          <div style={{border: border, textAlign: 'center', whiteSpace: 'pre-wrap'}}>{this.props.tricks !== undefined ? this.props.tricks : ' '}</div>
        </div>
      </div>
    );
  }
};

Fix styling with score box
Fix styling with score box
